我有一个带有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>form中的button默认用作submit button，因此当您单击它时，表单将被提交，因此页面将重新加载；您只需要指定该按钮不是submit按钮：
<button id="changeText" type="button"> button </button>
注意type="button"，默认为type="submit"