gpt4 book ai didi

javascript - 无法使用 javascript 函数更新 div

转载 作者:行者123 更新时间:2023-11-30 17:48:31 24 4
gpt4 key购买 nike

我正在研究 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>

最佳答案

您的按钮是 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();
...
}

或者使用按钮

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

或者返回false

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

关于javascript - 无法使用 javascript 函数更新 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19592135/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com