Hi, I want to write some javascript: after 30 seconds, the screen shows a button, which needs to be clicked within 10 seconds. If it is clicked within 10 seconds, we show the message "Msg" and next button. If not, we show a "miss message" and automatically click the next button.
I guess this uses settimeout function and if logics. The "miss message" shows even if the button is clicked within 10 seconds. I used 'alert' to check, if the button is clicked, the variable is set to 1, but the "miss message" still shows. Why?

Here are my javascript:

Qualtrics.SurveyEngine.addOnReady(function()
{
  /*Place your JavaScript here to run when the page is fully displayed*/
   
jQuery("#Msg").hide();
jQuery("#MissMsg").hide();
jQuery("#SvcButton").hide();
jQuery("#NextButton").hide();   
var x_val=0; // set this variable equal to 0

// After 30 seconds, show the button that needs to be clicked within 10 seconds
setTimeout(function(){
jQuery("#Button").show();

// if click the button, show the next button
jQuery('#Button').on('click', () => {
jQuery("#Msg").show();
jQuery("#NextButton").show();
var x_val=1; // set this variable equal to 1
});

// after ten seconds, hide timer, show MissServiceMessage
setTimeout(function(){
if (x_val==0){
jQuery("#MissMsg").show();
jQuery("#NextButton").click();
}
}, 10000);
}, 30000);
});