Как использовать интервал и функцию для изменения innerHTML div? - PullRequest
Новая
       6

Как использовать интервал и функцию для изменения innerHTML div?

0 голосов
/ 23 октября 2018

Так что я хочу, чтобы innerHTML для div ("gamediv") изменилось, когда таймер достигнет 0. В 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>

Ответы [ 2 ]

0 голосов
/ 23 октября 2018 

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>

Вы допустили некоторые логические ошибки, ссылаясь на приведенный выше код.

0 голосов
/ 23 октября 2018

Функция g1change() вызывается.Поскольку выполнение сценария продолжается, содержимое div обновляется.

Либо вы можете использовать другое, либо вам нужно прервать вызов функции после вызова метода clearInterval().

, но таймер все еще запускается при загрузке.

Не вызывать 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>
...