To change the src of an image using JavaScript, we simply use the image src property along with the getElementById method.
document.getElementById("img1").src = "anotherImg.jpg";
Let’s say I have the following HTML code:
<div id="div1">
<img id="img1" src="img.jpg">
</div>
To change the image src of #img1 from img.jpg to anotherImg.jpg, we will use the src property in the following JavaScript code:
document.getElementById("img1").src = "anotherImg.jpg";
Using JavaScript to Change the Image src with a Click
To change the source of an image we can combine the src property with a click event.
Let’s say we have the same HTML from above.
<div id="div1">
<img id="img-1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
<div id="click-me" onclick="changeIMG()">Change image</div>
</div>
We have two images, example-img1.png is a picture of gears and example-img2.png is the same image, but with different colors.
We have added an onclick event to the #click-me div which will run a function where we can change the image from the example-img1.png version to the example-img2.png version.
Here is the function below that will accomplish this:
function changeIMG(){
document.getElementById("img-1").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};
The final code and output for this example of how to change the source of an image using the src property and JavaScript is below:
Code Output:

Full Code:
<style>#img-1 { height:100px; }</style>
<div id="div1">
<img id="img-1" src="http://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
<div id="click-me" onclick="changeIMG()">Change image</div>
</div>
<script>
function changeIMG(){
document.getElementById("img-1").src = "http://theprogrammingexpert.com/wp-content/uploads/example-img2.png";
};
</script>
Hopefully this article has helped you understand how you can use JavaScript to change the image src of an image.
Leave a Reply