JavaScript program to change the image on button click

Change the Image source using javascript

Insert a image in HTML page and change the image(source) on Button Click.

Solution

<!doctype html>
<html>
	<head>
		<script>
			function change_pic()
			{
				document.getElementById("pic").src="b.jpg";
			}
		</script>
	</head>
	<body>
		<img id="pic" src="a.png" width="300px"/>
		<br/>
		<input type="button" value="Change Image" onclick="change_pic()"/>
	</body>
</html>

Output

Programming Examples

JavaScript program to change the image on button click