当通过使用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>
| 归档时间： |
|
| 查看次数： |
15301 次 |
| 最近记录： |