i was able to change img src using javascript, however, I can't figure out how to add multiple images to one function so that when I click on the image it should keep on changing images, it only works with one image please help me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
</head>
<body>
<h1 id="heading">all abount sports</h1>
<img id="cool" src="intro-1647872367.jpg" onclick="changeImage();">
</body>
</html>
<script>
function changeImage() {
var image = document.getElementById('cool');
if (image.src.match("beverages-carbonated-drink-cold-drink-1571849")) {
image.src = "intro-1647872367.jpg";
} else {
image.src = "beverages-carbonated-drink-cold-drink-1571849.jpg";
}
}
</script>