javascript - javascript：我的代码应该从 60 开始倒计时，但数值没有出现

Question

我的代码应该从 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>

标签： javascripthtmlcss

Answer 1

我已更新您的代码以使用一些全局窗口变量来传递数据。这是您更新的代码的小提琴。这是更新的 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>

看起来就像在提供的代码中一样，我相信这就是 Phillip 在他的评论中所指的，即 timeremaining 剩余变量不可访问。我把它放在窗口对象上，现在在那里更新它。我希望这会有所帮助。