javascript - 单击 html/javascript 中的按钮时更改图像

Question

请我想更改每次单击按钮时的温度级别。在某种程度上，第一次有一个白色箭头，第二次有两个白色箭头....我有带有 1 个箭头、2 个箭头的图像。

这是我的 html 图像:

   <div id="WBR"><img src="assets/AWImages/V0.png"></div>
   <button  id= "HI"   class="circle" >+</button>

我在 JavaScript 中模拟按钮点击，如下所示:

let addb = document.querySelector('#HI');
addb.addEventListener('click', () =>{
input.value = parseInt(input.value)+1;
if((input.value)<5)
{
socket.emit('Value of hum changed',input.value);
}
else
{
input.value =4;
}
});

我真的很感谢你的帮助;)

Answer 1

let addb = document.querySelector('#WBR');
let wbr = document.querySelector('#HI');
var f = document.querySelector('#f');
var Score = 0;
var win = 5;
var gameOver = false;

addb.addEventListener("click", function () {
  if (!gameOver) {
        Score++ ;
          if (Score == win) {
          gameOver = true;
          addb.style.color = "green";
  }
    f.innerHTML = Score;
  }
});

 <div id="WBR"><img src="assets/AWImages/V0.png"></div>
   <button  id= "HI"   class="circle" >+</button>
   <p id="f">0</p>