have the exact same code in two consecutive questions; the code in the second question won't run | XM Community
Skip to main content

I have a countdowntimer for each page that starts automatically and also presses the next button automatically. I need to carry out the same code in multiple consecutive questions, but only the code in the first question will run perfectly well; the second one doesn't even start. When inspecting console, I found all the errors saying
Uncaught TypeError: Cannot set property 'innerHTML' of null
Even though I don't think any one of the elements are null since they're defined objects. Somehow, it's just the lines document.getElementById("seconds") in startThinkingTimer() function—the two lines each in the two if statements—that cause this error b/c apparently the item referred to by "seconds" is null at that point.
Does anyone know why this might be the case?
Or, can I clear all the javascript from the previous question? If so, how?
Attached below is my code that's repeated in every question, in case you need to refer to it:
Javascript (the indentations became a bit off when copying)
Qualtrics.SurveyEngine.addOnload(function(){
var thinkingTimeLimit = 15;
var typingTimeLimit = 10;
var thinkingTimer;
var typingTimer;

document.getElementById("timeShower").innerHTML = "time: :";
document.getElementById("seconds").innerHTML="15";
document.getElementById("minutes").innerHTML="00";

document.getElementById("instructions").innerHTML = "You have 15 seconds to think about the prompt and come up with your two most favourite fast food restaurant chains.";

  function startTypingTimer() {
  typingTimer = setInterval( function(){
  if (typingTimeLimit > 0) {
  document.getElementById("seconds").innerHTML=pad(--typingTimeLimit%60);
          document.getElementById("minutes").innerHTML=pad(parseInt(typingTimeLimit/60,10));
  }
  if (typingTimeLimit == 0) {
  clearInterval(typingTimer);
  jQuery("#NextButton").click();
  }
    }, 1000);
  }

      function startThinkingTimer() {
          thinkingTimer = setInterval( function(){
  if (thinkingTimeLimit >0) {
  document.getElementById("seconds").innerHTML=pad(--thinkingTimeLimit%60);
          document.getElementById("minutes").innerHTML=pad(parseInt(thinkingTimeLimit/60,10));
  }
  if (thinkingTimeLimit == 0) {
  clearInterval(thinkingTimer);
  document.getElementById("seconds").innerHTML="10";
  document.getElementById("minutes").innerHTML="00";
  document.getElementById("instructions").innerHTML = "You now have 10 seconds to type in the two fast food restaurant chains. The page will automatically move on to the next page once time is up.";
  startTypingTimer();
  }
    }, 1000);
  }

function pad (val) { 
return val > 9 ? val : "0" + val; 
}

startThinkingTimer();

});

HTML:


 



00:15

you probably need to unload or reset the function in the addOnUnload function so there is not any residual conflict with the previous timer.


pogi
Oh okay. How exactly can I reset the function or unload though? Am I supposed to clearInterval again in addOnUnload?
I'm new to js so please bear with me if I don't get some stuff right away!


Leave a Reply