javascript - 为什么我的浏览器没有通过“点击”功能对我的 JavaScript 做出反应？

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

我希望用鼠标按下它们时浏览器中的图像会发生变化。

标签： javascripthtml

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"/> -->