通过JavaScript清除浏览器

代码运行良好，但解决了函数

stopCounting（）

中的问题，该函数还删除了

的子节点

每当我单击

Stop

时，它会清除浏览器，但在单击开始按钮输入一些值后，它会跳过

counter.currValue==35的值<代码>计数器.currValue==40

counter.currValue==50

并且也不加载图像

我想在上传图像后清除浏览器。它第一次工作，从第二次开始，它跳过值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);
     }
  }

var buttonStartField=document.getElementById（'btn2'）；
var buttonedfield=document.getElementById（'btn1'）；
var startValueField=document.getElementById（'startValue'）；
buttonStartField.addEventListener（'单击'，开始计算）；
ButtonnendField.addEventListener（'单击'，停止计数）；
变量计数器={
当前值：0，
间隔：空
};
函数增量（）{
counter.currValue++；
如果（counter.currValue==35）{
showImage（）；
document.getElementById（'counter1'）。innerHTML='值：'
+counter.currValue+'
'；
}否则如果（counter.currValue==40）{
showImage1（）；
document.getElementById（'counter2'）。innerHTML='值：'
+counter.currValue+'
'；
}
如果（counter.currValue==50）{
showImage2（）；
document.getElementById（'counter3'）。innerHTML='值：'
+counter.currValue+'
'；
}
document.getElementById（'counter'）.innerHTML='Value:'+counter.currValue
+“
”；
}
函数startCounting（）{
counter.currValue=startValueField.value | | 0；
计数器间隔=设置间隔（增量，1000）；
}
函数stopCounting（）{
清除间隔（计数器间隔）；
clearContent（）；
}
函数clearContent（节点）{
var div=document.getElementById（'space'）；
while（div.hasChildNodes（））{
第一个孩子（第一个孩子）；
}
}

HTML

我想你问了两个问题：

1） 当您单击“停止”时，

将被清空

解决方案=删除

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');
});

什么是函数
showImage（）
（1和2）一个JSFIDLE演示可能会让这个问题变得很简单，因此需要为您解决：）您是否尝试打印currValue，以查看在代码执行期间的任何时刻它是35、40还是50？尝试使用console.log（“当前值：”+currValue）发布你的html代码please@Mark下面是演示，如果您只需删除函数clearContent（），它就可以正常工作。值为35、40和50时，所有相应的图像都会出现。您可以停止计数并重新开始，也可以从新值开始。现在我的问题是停止计数并一起清除浏览器。我该怎么做？如果计数超过35，则显示绿色图像。现在，有人想从30或35以下重新开始，如果浏览器不清楚，更新图像不会反映。看来你的jsbin缺少很多代码，然后。。。回答你的问题；与其删除图像，不如将其隐藏起来？
    // this is all jQuery
$('#laser').animate({
    width : 300,
    height : 300
}, function() {
    $(this).fadeIn('fast');
});