Очистить браузер с помощью JavaScript

0

Код работает хорошо, но я решаю проблему в функции stopCounting() которая также удаляет дочерний узел <div id ='space'>.

Всякий раз, когда я нажимаю кнопку " Stop он очищает браузер, но после нажатия кнопки "Пуск", ставя какое-то значение, он пропускает значение counter.currValue == 35; counter.currValue == 40; counter.currValue == 50 а также не загружает изображение.

Я хочу очистить браузер после загрузки изображения. Он работает в первый раз, начиная с 2-го раза, он пропускает значения 35, 40, 50 и изображения.

Любое объяснение или решение, почему оно пропускает эти значения со второго раза?

var buttonStartField = document.getElementById('btn2');
var buttonEndField = document.getElementById('btn1');
var startValueField = document.getElementById('startValue');

buttonStartField.addEventListener('click', startCounting);
buttonEndField.addEventListener('click', stopCounting);

var counter = {
     currValue : 0,
     interval : null
};

 function increment() {

  counter.currValue++;

if (counter.currValue == 35) {
    showImage();
    document.getElementById('counter1').innerHTML = 'Value:'
            + counter.currValue + '</br>';
} else if (counter.currValue == 40) {
    showImage1();
    document.getElementById('counter2').innerHTML = 'Value:'
            + counter.currValue + '</br>';
}
if (counter.currValue == 50) {
    showImage2();
    document.getElementById('counter3').innerHTML = 'Value:'
            + counter.currValue + '</br>';
}

document.getElementById('counter').innerHTML = 'Value:' + counter.currValue
        + '</br>';
  }

function startCounting() {  
  counter.currValue = startValueField.value || 0;
  counter.interval = setInterval(increment, 1000);
 }
    function stopCounting() {
      clearInterval(counter.interval);
      clearContent();
}

 function clearContent(node) {
    var div = document.getElementById('space');
     while (div.hasChildNodes()) {
      div.removeChild(div.firstChild);
     }
  }

HTML

<body>
       <!-- @content --> 
        <div id= "div1">             
                <p id="counter"> </p> 
        </div>  
        <form class="f1">                   

            <input id= "startValue" type="number">
            <input class="button" id = "btn2" type="button" value="Start">
            <input class="button" id = "btn1" type="button" value="Stop">           

        </form>

            <div id="space">
                  <div id="laser"><p id="counter1"></p> </div>                    
                  <div id="laser1"><p id="counter2"></div>
                  <div id="laser2"><p id="counter3"></div>                                      
            </div>

    </body>
  • 0
    Каковы функции showImage() (1 и 2)
  • 0
    Демонстрация jsFiddle, вероятно, сделает это тривиальным для SO, чтобы решить для вас :)
Показать ещё 7 комментариев
Теги:

1 ответ

1

Я думаю, вы задали два вопроса:

1) <div id ='space'> очищается, когда вы нажимаете "stop".

Решение = Удалить clearContent(); от функции stopCounting(). Или отредактируйте clearContent() поскольку все, что она делает, - это удалить всех детей.

И главный вопрос

2) Кажется, что вы пропускаете "35", "40" и "50", когда он подсчитывает.

Проблема в том, что вы вызываете jQuery (анимацию), но вы не загружаете jQuery, чтобы позаботиться о них. Когда он попадает в эту ошибку, он завершает работу и не отображает счетчик. Затем следующая итерация setInterval срабатывает и снова работает.

Решение: удалите jQuery или загрузите jQuery в начало документа

    // this is all jQuery
$('#laser').animate({
    width : 300,
    height : 300
}, function() {
    $(this).fadeIn('fast');
});
Поделиться
  • 0
    Хорошо, если вы просто удалите функцию clearContent (), она прекрасно работает. При значениях 35, 40 и 50 появляются все соответствующие изображения. Вы можете остановить подсчет и начать заново, а также начать с нового значения. Теперь мой вопрос - остановить счет и очистить браузер вместе. Как я могу это сделать? Если счет пересекает 35, появляется зеленое изображение. Теперь кто-то хочет начать снова с 30 или менее 35, если браузер не ясен, обновление изображения не отражается.
  • 0
    Похоже, что в вашем jsbin отсутствует много кода ... Чтобы ответить на ваш вопрос; Вместо того, чтобы удалить изображение, почему бы вам не скрыть его?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню