In this tutorial we will learn how to Change Multiple Images On Click with JavaScript. JavaScript and HTML codes are give below.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change images on click JavaScript</title>
</head>
<body>
<img src="car.png" id="image">
<br>
<button onclick="changeImages()">Change Image</button>
</body>
</html>
JavaScript Code
Take a look at the JavaScript code given below.
<script>
var img = document.getElementById('image');
const images = ["bike","boat","bus","rocket","plane","car"];
var imagesLength = images.length;
var x=0;
function changeImages(){
img.src = images[x]+".png";
x=x+1;
if(x==imagesLength)
{
x=0;
}
}
</script>
Video Tutorial
Watch video tutorial on How To Change Multiple Images On Click with JavaScript.