我正在构建一个用户正在吃冰淇淋的简单应用。每次用户单击该按钮时，图像src都会更改为一张图片，其图片比另一张图片少1个。但是，如何多次更改图像的src？
var iceCream = document.getElementById("img");
var imgSrc;
function eat() {
var eating = document.getElementById("eat");
eating.play();
iceCream.src = imgSrc;
srcSelector()
}
function srcSelector() {
if ( iceCream.src === "images/5scoops.jpg") {
imgSrc = "4scoops.jpg";
}
}img {
display: block;
margin-left: auto;
margin-right: auto;
}
button {
position: absolute;
left: 740px;
right: 400px;
top: 70%;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ice cream</title>
</head>
<body>
<img src="images/5scoops.jpg" id="img" alt="5 scoops ice cream">
<audio id="eat">
<source src="eat.mp3" type="audio/mpeg">
</audio>
<p>the button also plays an eating sound</p>
<button onclick="eat()">Eat!</button>
</body>
</html>我从4个勺图像src确定，但是不起作用（在我的原始页面中）。我想做的是：
希望您不介意我用小猫代替冰淇淋，但您明白了：
var iceCream = document.getElementById("img");
var numberHint = document.getElementById("number");
var numberOfCats = 5;
function eat() {
numberOfCats--;
iceCream.src = 'https://placekitten.com/200/200?image=' + numberOfCats;
iceCream.alt = numberOfCats + ' scoops ice cream';
numberHint.innerHTML = iceCream.alt;
}<img src="https://placekitten.com/200/200?image=5" id="img" alt="5 scoops ice cream">
<div><button onclick="eat()">Eat!</button></div>
<div id="number">5 scoops ice cream</div>您可能想使用一个变量，例如spoonsLeft，并在每次调用eat()时将其递增。然后您可以将"images/5scoops.jpg"更改为"images/"+spoonsLeft+"scoops.jpg"。我希望它能按照您的意思做。