HTML JavaScript 在 JavaScript 运行后恢复为默认值

html javascript reverts to default after javascript has run

本文关键字：JavaScript 默认值 恢复 运行 HTML      更新时间：2023-09-26

我正在学习javascript，我们被赋予了通过单击按钮更改段落图像/颜色的任务。我的代码有效，但我必须添加一个 alert（） 来阻止它以显示它，因为它一旦运行就会恢复为默认图像/颜色。

function changeImage() {
    var myTag=document.getElementById("imageColour");
    myTag.src = "images/white.jpg";
    var x = document.getElementById("demo");
    x.style.color = "red";
    // Had to add this to see change
    alert("Has reached changeImage()");
}
<html lang="en">
    <head>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="script.js"></script>
	<title>Exercise 3</title>
    </head>
    <body>
	<h3>Exercise 3</h3>
	<img src="images/black.jpg" id="imageColour"/>
	<form>
	    <button type="submit" id="mySubmitButton">Change Colour</button>
	</form>
	<p id="demo">Click the button to change the colour of this paragraph.</p>
    </body>
</html>
<!--javascript-->
<script type="text/javascript">
    document.getElementById("mySubmitButton").addEventListener("click", changeImage);
</script>

任何帮助表示赞赏。

您正在提交表单。这会导致页面重新加载和重置。

使用 type="button"（您不妨在表单时完全删除表单）或对事件对象（要changeImage的第一个参数）调用 preventDefault 。

相关文章：