CODEWITHSUNDEEP
javascripthtml
Pamela Keogh
Pamela Keogh

Reputation: 133

html javascript reverts to default after javascript has run

I am learning javascript and we have been given the task of changing image / colour of paragraph from the click of the button. My code works but I had to add an alert() to stop it to show this as it reverts to default image/colour as soon as it runs.

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>

Any help appreciated.

Upvotes: 0

Views: 75

Answers (1)

Quentin
Quentin

Reputation: 943591

You are submitting a form. That causes the page to be reloaded and reset.

Use type="button" (and you might as well remove the form entirely while you are at it) or call preventDefault on the event object (the first argument to changeImage).

Upvotes: 2

Related Questions