Question

我正在研究FizzBuzz解决方案。当我调用函数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>

Answer 1

您的按钮属于submit类型 - 这会导致页面回发/刷新，因此您会看到它闪烁的原因。使用e.preventDefault阻止默认操作或将input更改为button类型，或使用return false;

防止默认：

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

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

或使用类型button

<input type="button" value="Submit" onclick = "fizzbuzz()"/>

或return false

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

Answer 2

点击处理程序运行后，您的<input type="submit">正在提交表单并重新加载页面。

您需要从处理程序return false来阻止这种情况。

无法使用javascript函数更新div

2 个答案: