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

为什么浏览器对我的JavaScript的“点击”功能没有反应？

1 个答案: