gpt4 book ai didi

javascript - 避免在使用函数调用更新 innerHTML 后重新加载页面

转载 作者:行者123 更新时间:2023-11-30 11:46:29 26 4
gpt4 key购买 nike

当使用 innerHTML 更改带有函数的 html 元素时,html 元素发生更改,但页面立即重新加载并且该元素设置回其原始值。如何避免这种情况?

我意识到我可能遗漏了一些非常重要的东西,并且觉得提出这个问题有点尴尬。但是,我在谷歌上搜索了这个问题,但找不到答案。如果有人能花一点时间让我在这片 html、javascript、css 和 php 的森林中走上正轨,我将非常感激。

<!DOCTYPE html>
<html>
<head>
<title>Question stackoverflow</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<p id="test"> This should be changed after button click </p>
<form>
<button onclick="test()">Refresh</button>
</form>
</div>
<script>
function test(){
document.getElementById("test").innerHTML = "replaced";
}
</script>
</body>
</html>

最佳答案

您只需要忽略默认事件以防止回发。也就是说,如果您不想回发到服务器。

<!DOCTYPE html>
<html>
<head>
<title>Question stackoverflow</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<p id="test"> This should be changed after button click </p>
<form>
<button onclick="test(event)">Refresh</button>
</form>
</div>
<script>
function test(event){
document.getElementById("test").innerHTML = "replaced";
event.preventDefault()
}
</script>
</body>
</html>

关于javascript - 避免在使用函数调用更新 innerHTML 后重新加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40839715/

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