使用javascript函数更新div时出现问题_Javascript_Dom

使用javascript函数更新div时出现问题

javascript dom

使用javascript函数更新div时出现问题,javascript,dom,Javascript,Dom,我正在研究一种泡沫解决方案。当我调用onload函数并用提示符设置输入变量（请参阅代码中的注释）时，它工作正常，但当我添加一个表单，调用onclick函数，并尝试使用getElementById设置变量时，我的函数不会打印到div。在原始版本中，函数完成后输出可见。在更新版本中，输出短暂闪烁，然后消失。就好像我正在立即刷新屏幕。有什么建议吗？谢谢 <script> function fizzbuzz(){ // var num = prompt("Enter a

我正在研究一种泡沫解决方案。当我调用onload函数并用提示符设置输入变量（请参阅代码中的注释）时，它工作正常，但当我添加一个表单，调用onclick函数，并尝试使用getElementById设置变量时，我的函数不会打印到div。在原始版本中，函数完成后输出可见。在更新版本中，输出短暂闪烁，然后消失。就好像我正在立即刷新屏幕。有什么建议吗？谢谢

 <script>
    function fizzbuzz(){
    //  var num = prompt("Enter a number: ");
      var num = document.getElementById("number").value;
      var div3 = document.getElementById("div3");
      for(var i=0; i<num; i++){
        if (i%3===0 && i%5===0){
          div3.innerHTML = div3.innerHTML+"Fizz Buzz<br>";
        }else if (i%3===0){
          div3.innerHTML = div3.innerHTML+"Fizz<br>";
        }else if (i%5===0){
          div3.innerHTML = div3.innerHTML+"Buzz<br>";
        }else{
          div3.innerHTML = div3.innerHTML+(i+1)+"<br>";
        }
      }
    }
  </script>
</head>

<body>
    <!--body onload = "fizzbuzz()"-->
  <div id = "div1">
    <h1>Fizz Buzz</h1>
    <form>
      <p>Enter a number:</p><p><input type="text" name="number" id="number"/><input type="submit" value="Submit" onclick = "fizzbuzz()"/></p>
    </form>
    <div id="div3"></div>
  </div>

</body>


函数fizzbuzz（）{
//var num=prompt（“输入一个数字：”）；
var num=document.getElementById（“number”）.value；
var div3=document.getElementById（“div3”）；
对于（var i=0；i您的按钮类型为submit
，这会导致页面返回/刷新，因此您会看到它闪烁。请使用e.preventDefault
阻止默认操作，或将输入更改为按钮类型，或使用return false；

防止违约：
<!--Pass in event to the func-->
<input type="submit" value="Submit" onclick = "fizzbuzz(event)"/>

//Use it
function fizzbuzz(e) {
    e.preventDefault();
    ...
}

或返回false

function fizzbuzz(e) {
    ...
    ...
    return false;
}

单击处理程序运行后，
将提交表单并重新加载页面
您需要从处理程序返回false
，以防止出现这种情况。
或者只返回false。@tymeJV，et al-谢谢。好的，它是有效的，我知道问题与我的按钮选择有关。我在另一个问题中也发现了这一点“submit按钮可用于提交表单，而普通按钮可用于执行某些javascript代码。”submit按钮是否固有刷新功能？我的意思是，它基本上是“submit and refresh”按钮？submit查找要提交到服务器的值（通常位于表单内部），在没有AJAX的情况下提交到服务器时，将发生刷新或回发。我想，一旦您在表单中提交了数据，您就不再需要表单中的数据了。是时候为下次提交清除表单了？但当我更改为键入按钮并单击它时，文本字段中的信息也会被清除。hmmmHmm，不应该是。键入按钮不会导致发回。请注意：顺便说一句，请忽略我的函数没有返回正确的嘶嘶嗡嗡声值这一事实（非常尴尬）。我试图用字符串和int解决一个问题，并发布了一个临时解决方案。但这与我遇到的问题无关。
function fizzbuzz(e) {
    ...
    ...
    return false;
}