Question

我正在学习javascript，我们的任务是点击按钮更改段落的图像/颜色。我的代码可以工作，但我必须添加一个alert（）来阻止它显示，因为它一旦运行就会恢复为默认的图像/颜色。

＆＃13;

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()");
}

＆＃13;

<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>

＆＃13;

任何帮助表示感谢。

Answer 1

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

使用type="button"（您也可以在访问时完全删除表单）或在事件对象上调用preventDefault（changeImage的第一个参数）。

在javascript运行后，html javascript恢复为默认值

1 个答案: