javascript - 为什么我的浏览器不使用 "click"函数对 JavaScript 作出 react ？

Question

当我在浏览器中按鼠标时，无法更改图像。我真的一直在努力寻找这个问题的答案，但还没有......所以

我尝试将变量等更改为“.jpg”，并尝试将其删除。

var stockholm = document.getElementById("stockholm.jpg");
var tokyo = document.getElementById("tokyo.jpg");
var newyork = document.getElementById("newyork.jpg");

stockholm.addEventListener("click", function() {
  stockholm.style.backgroundColor = "yellow";
  tokyo.style.backgroundColor = "white";
  newyork.style.backgroundColor = "white";
});

tokyo.addEventListener("click", function() {
  stockholm.style.backgroundColor = "white";
  tokyo.style.backgroundColor = "yellow";
  newyork.style.backgroundColor = "white";
});
newyork.addEventListener("click", function() {
  stockholm.style.backgroundColor = "white";
  tokyo.style.backgroundColor = "white";
  newyork.style.backgroundColor = "yellow";
});
var stockholm = 1;
var stockholm = document.getElementById("stockholm");
stockholm.addEventListener("click", function() {
  if (nr % 3 == 0) stockholm.src = "tokyo.jpg";
  else if (nr % 3 == 1) stockholm.src = "newyork.jpg";
  else stockholm.src = "stockholm.jpg";
  nr++;
});

我预计当用鼠标按下浏览器中的图像时，图像会发生变化。

Answer 1

@controlAltDel说的也是正确的，你应该听听他的建议。

设置图像的宽度和高度，因为您要更改背景颜色!您将如何看到其上有图像的背景变化(如果您使用的是图像)。

var stockholm = document.getElementById("stockholm");
stockholm.addEventListener('click', function() {
  stockholm.style.background = 'red'
})

<!-- Use stockholm instead of stockholm.jpg -->
<img src="" id="stockholm" width="500px" height="500px"/>
<!-- <div id="stockholm" width="500px" height="500px"> -->
<!-- <img src="" id="stockholm" width="500px" height="500px"/> -->