1

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

2 回答 2

2

您的按钮属于类型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;
}
于 2013-10-25T14:12:38.550 回答
0

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

您需要return false从处理程序中防止这种情况发生。

于 2013-10-25T14:13:02.553 回答