Question

因此，我希望在计时器达到0时更改div（“ gamediv”）的innerHTML。在div（“ gamediv”）中，应该有另一个div触发该功能。但是现在，计时器开始加载，g1change()永远不会发生。

var count = 4;

var counter = setInterval(timer, 1000);

function timer() {
  count -= 1;
  if (count === 0) {
    g1change();
    clearInterval(counter);
  }

  document.getElementById("gamediv").innerHTML = '<center><p id="countdown">' + count + '</p></center>';
}

function g1change() {
  document.getElementById("gamediv").innerHTML = '<h1 id="g1text">Click the button to the right!</h1><div onclick="correct()" class="g1button"></div><div onclick="wrong()" class="g1button">g1button</div>'
}

<div class="gamediv" id="gamediv">
  <div onclick="timer()" class="start">
    <h1 class="starttext">Start!</h1>
  </div>
</div>

Answer 1

函数g1change()被调用。随着脚本的继续执行，div的内容正在更新。

在调用clearInterval()方法之后，您可以使用else或中断函数调用。

但计时器仍在加载时开始。

请勿在页面加载时调用setInterval()。在这里，我创建了一个新函数，即callTimer()，该函数在单击按钮时被调用

var count = 4;
var counter;

function callTimer() {
  counter = setInterval(timer, 1000);
}

function timer() {
  count -= 1;
  if (count === 0) {
    g1change();
    clearInterval(counter);
    //Termite the function
    return;
  }

  document.getElementById("gamediv").innerHTML = '<center><p id="countdown">' + count + '</p></center>';
}

function g1change() {
  document.getElementById("gamediv").innerHTML = '<h1 id="g1text">Click the button to the right!</h1><div onclick="correct()" class="g1button"></div><div onclick="wrong()" class="g1button"></div>'
}

<div class="gamediv" id="gamediv">
  <div onclick="callTimer()" class="start">
    <h1 class="starttext">Start!</h1>
  </div>
</div>

Answer 2

var count = 4;

var counter = setInterval(timer, 1000);

function timer() {
  count -= 1;
  //console.log(count);
  if (count === 0) {
    g1change();
   
  }else{
    document.getElementById("gamediv").innerHTML = '<center><p id="countdown">' + count + '</p></center>';
  }
}

function g1change() {
  document.getElementById("gamediv").innerHTML = '<h1 id="g1text">Click the button to the right!</h1><div onclick="correct()" class="g1button"></div><div onclick="wrong()" class="g1button">g1button</div>';
   clearInterval(counter);
}

<div class="gamediv" id="gamediv">
  <div onclick="timer()" class="start">
    <h1 class="starttext">Start!</h1>
  </div>
</div>

您在参考上述代码时犯了一些逻辑错误。

如何使用间隔和函数来更改div的innerHTML？

2 个答案: