Question

如果点击它，我试图切换图像。 JavaScript似乎取代了图像，但更新的图像不会出现在屏幕上。这是我的HTML代码：

<!DOCTYPE html>
<html>
<script src="myscript.js" defer></script>
<div><img id="light" src="images/light_off.png" width="200px"></div>
</html>

和我的JavaScript代码：

var light_src = document.getElementById('light').src;

var image = light_src.substring(light_src.lastIndexOf("/")+1);

light.addEventListener("click", function(){
    if (image == "light_off.png"){
        alert("1");
        light_src = "file:///H:/mydir/images/light_on.png";
    }
    else {
        alert("2");
        light_src = "file:///H:/mydir/images/light_off.png";
    }
});

源确实似乎在变化，因为每次单击图像时，警报都会在1到2之间切换。但是，图像在屏幕上似乎没有变化。

我已通过将网址复制到浏览器地址栏来确认这两张图片都有效。

我做错了什么？

Answer 1

问题是您要更改light_src的值，而不是元素的来源。换句话说，light_src是源的副本，更改它不会更改图像源。

您应该只存储图像元素，而不是将源存储在变量中，如下所示：

// The image URLs
const imageOn = 'file:///H:/mydir/images/light_on.png'
const imageOff = 'file:///H:/mydir/images/light_on.png'

// Store the image element to use later
const imageElement = document.getElementById('light') 

// Add the event listener
imageElement.addEventListener("click", function() {
  if (imageElement.src === imageOn) {
    imageElement.src = imageOff
    console.log('Switched light off')
  } else {
    imageElement.src = imageOn
    console.log('Switched light on')
  }
});

Answer 2

不要将.src与选择器

一起使用

var light=document.getElementById('light');
var image = light.src.substring(light.src.lastIndexOf("/")+1);

light.addEventListener("click", function(){
    if (image == "light_off.png"){
        console.log(light.src);
        light.src = "file:///H:/mydir/images/light_on.png";
    }
    else {
        console.log(light.src);
        light.src = "file:///H:/mydir/images/light_off.png";
    }
});

<!DOCTYPE html>
<html>
<script src="myscript.js" defer></script>
<div><img id="light" src="images/light_off.png" width="200px" alt="image"></div>
</html>

使用JavaScript更改图像的src不会导致图像更改

2 个答案: