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

Question

Please i want to change the temperature level in each button click. In a way to have a white arrow in a first time, two white arrow ia seconde time .... i have images withe 1 arrow, 2 arrow ext.

this my image in html :

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

I simulate the button click in javascript like this :

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;
}
});

I really appreciate ur help ;)

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>