所以我正在尝试创建一个网页功能，您可以在其中输入文本，它会更改页面上的某些内容。我可以使用具有预先安排的文本的按钮并更改它，但是当我使用表单时，它会更改文本不到一秒，然后恢复为原始文本。希望得到一些帮助。下面是我的 html 和 js 文件。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CS_Site_Index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="CS_Site_Index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText"> Click Here To Change The Text</button>
<button id="ButtonText2"> Click Here To Change The Text Back</button>
<br>
<form>
Change The Text<br>
<input id="text1" type="text"><br>
<br>
<input id="ButtonTextSubmit" type="submit" value="Submit">
</form>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
这是我的js文件
document.getElementById("ButtonText").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hello World";});
document.getElementById("ButtonText2").addEventListener("click", function(){document.getElementById("demo").innerHTML = "Hi";});
document.getElementById("ButtonTextSubmit").addEventListener("click", function(){document.getElementById("demo").innerHTML = document.getElementById("text1").value;});
非常感谢您的帮助 谢谢
最佳答案
您的页面正在刷新。您可以通过将 e.preventDefault() 添加到表单提交处理程序来防止这种情况，如下所示:
document.getElementById("ButtonTextSubmit").addEventListener("click", e => {
e.preventDefault(); // prevent refresh
document.getElementById("demo").innerHTML = document.getElementById("text1").value;
}
);
关于javascript - 使用 Javascript 通过按钮更改网页上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51504253/