gpt4 book ai didi

javascript - 如何阻止 DOM 更改立即恢复?

转载 作者:行者123 更新时间:2023-11-28 16:47:04 26 4
gpt4 key购买 nike

我有一个带有 JavaScript 事件处理程序的按钮,尝试在单击时更改文档对象模型。它进行了更改,但立即恢复了它;单击按钮会导致文本发生变化,但只发生一瞬间,然后又变回来。为什么又变回来了?我怎样才能阻止这种情况发生?

var button_variable_name = document.getElementById("changeText");
button_variable_name.addEventListener("click", function() {
document.querySelector('#test').textContent="Replace the text";

});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blank</title>

</head>
<body>

<form>

<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<button id="changeText" > button </button>

</form>
<p id="test"> test text </p>

</body>
</html>

最佳答案

表单内的按钮默认用作提交按钮,因此当您单击它时,表单将被提交,因此页面重新加载;您只需要指定该按钮不是提交按钮:

<button id="changeText" type="button"> button </button>

注意type="button",默认为type="submit"

关于javascript - 如何阻止 DOM 更改立即恢复?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60404208/

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