javascript：我的代码应该从60开始倒数 ，但数字值未出现

Posted 2023-01-12

我的代码应该从60开始倒数​​，但是没有出现数字值。计时器开始计时，但仅显示未定义/ NaN。我已经浏览了几次代码，但没有发现问题。我做错了什么？谢谢。剩下的只是为所需的文本/代码比例占用空间。

   //If we click on the start/reset button
    document.getElementById("startreset").onclick = function () 

      //If we are playing
      if (playing == true) 

        location.reload(); //reload page

       else  //If we are not playing

        //change mode to playing
        playing = true;

        //set score to 0
        score = 0;
        document.getElementById("scorevalue").innerhtml = score;

        //show countdown box
        show("timeremaining")
        document.getElementById("timeremainingvalue").innerHTML = timeremaining;

        //change button to reset
        document.getElementById("startreset").innerHTML = " Reset";

        //start countdown
        startCountdown();

        //generate new Q&A
        generateQA();
      

    ;

    //reload page

    //reduce time by one second in loop
    //time left?
    //Yes->continue
    //No->game over

    //generate new Q&A

    //If we click on answer box
    //If we are playing
    //correct?
    //yes
    //increase score by one
    //show correct box
    //generate new Q&A
    //no
    //show try again box


    //functions

    //start counter
    function startCountdown() 
      action = setInterval(function () 
        timeremaining -= 1;

        document.getElementById("timeremainingvalue").innerHTML = timeremaining;
        if (timeremaining == 0)  //game over
          clearInterval(action);
          stopCountdown();
          show("gameOver");
          document.getElementById("gameOver").style.display = "block";
          document.getElementById("gameOver").innerHTML = "<p>Game Over.</p><p>You scored: " + score + ".</p>";
          hide("timeremaining");
          hide("correct");
          hide("wrong");
          playing = false;
        
      , 1000);
    

    //stop counter
    function stopCountdown() 
      clearInterval(action);
    

    //hide an element
    function hide(id) 
      document.getElementById(id).style.display = "none";
    

    //show an element
    function show(id) 
      document.getElementById(id).style.display = "block";
    

    //generate Q and multiple A
    function generateQA() 

    

/* no css */

<div id="container">
  <div id="score">
    score:
    <span id="scorevalue">0</span>
  </div>
  <div id="correct">
      correct
  </div>
  <div id="wrong">
      try again
  </div>
  <div id="question">
  </div>
  <div id="instruction">
    Click on the correct answer.
  </div>
  <div id="choices">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
  </div>
  <div id="startreset">
    Start Game
  </div>
  <div id="timeremaining">
    Time Remaining <span id="timeremainingvalue">60</span> sec
  </div>
  <div id="gameOver">
  </div>
</div>

答案

我已经更新了您的代码，以使用一些全局窗口变量来传递数据。这是带有更新后代码的fiddle。以下是更新后的html和javascript：

//If we click on the start/reset button
window.timerIsPlaying = false;
window.timeRemaining = 60;
document.getElementById('startreset').onclick = function() 
	//If we are playing
	if (window.timerIsPlaying == true) 
		location.reload(); //reload page
	 else 
		//If we are not playing

		//change mode to playing
		window.timerIsPlaying = true;

		//set score to 0
		score = 0;
		document.getElementById('scorevalue').innerHTML = score;

		//show countdown box
		show('timeremaining');
		document.getElementById('timeremainingvalue').innerText = window.timeRemaining;

		//change button to reset
		document.getElementById('startreset').innerHTML = ' Reset';

		//start countdown
		startCountdown();

		//generate new Q&A
		generateQA();
	
;

//reload page

//reduce time by one second in loop
//time left?
//Yes->continue
//No->game over

//generate new Q&A

//If we click on answer box
//If we are playing
//correct?
//yes
//increase score by one
//show correct box
//generate new Q&A
//no
//show try again box

//functions

//start counter
function startCountdown() 
	action = setInterval(function() 
		window.timeRemaining -= 1;

		document.getElementById('timeremainingvalue').innerHTML = window.timeRemaining;
		if (timeremaining == 0) 
			//game over
			clearInterval(action);
			stopCountdown();
			show('gameOver');
			document.getElementById('gameOver').style.display = 'block';
			document.getElementById('gameOver').innerHTML = '<p>Game Over.</p><p>You scored: ' + score + '.</p>';
			hide('timeremaining');
			hide('correct');
			hide('wrong');
			playing = false;
		
	, 1000);


//stop counter
function stopCountdown() 
	clearInterval(action);


//hide an element
function hide(id) 
	document.getElementById(id).style.display = 'none';


//show an element
function show(id) 
	document.getElementById(id).style.display = 'block';


//generate Q and multiple A
function generateQA() 

<div id="container">
  <div id="score">
    score:
    <span id="scorevalue">0</span>
  </div>
  <div id="correct">
    correct
  </div>
  <div id="wrong">
    try again
  </div>
  <div id="question"></div>
  <div id="instruction">
    Click on the correct answer.
  </div>
  <div id="choices">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
  </div>
  <div id="startreset">
    Start Game
  </div>
  <div id="timeremaining">
    Time Remaining <span id="timeremainingvalue">60</span> sec
  </div>
  <div id="gameOver"></div>
</div>

以上是关于javascript：我的代码应该从60开始倒数 ，但数字值未出现的主要内容，如果未能解决你的问题，请参考以下文章

GMT/UTC 中的 Javascript 倒数计时器

React 中的倒数计时器

如何在 kivy 中创建 60 秒倒数计时器

带有普通 JavaScript 的 VueJS

刷新网页时如何防止倒数计时器重置？

在按钮上显示倒数计时器