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

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

javascript

使用JavaScript更改图像的src不会导致图像更改,javascript,Javascript,我试图切换一个图像，如果我点击它。JavaScript似乎确实取代了图像，但是，更新后的图像不会出现在屏幕上。以下是我的HTML代码： <!DOCTYPE html> <html> <script src="myscript.js" defer></script> <div><img id="light" src="images/light_off.png" width="200px"></div> </h

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

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

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

我已经通过将URL复制到浏览器地址栏来验证这两个图像是否都有效

我做错了什么？

问题是您正在更改

light\u src

的值，而不是元素的源。换句话说，

light\u src

是源的副本，更改它不会更改图像源

与其将源存储在变量中，不如只存储image元素，如下所示：

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

不要对选择器使用

.src

var light=document.getElementById（'light'）；
var image=light.src.substring（light.src.lastIndexOf（“/”）+1）；
addEventListener（“单击”，函数（）{
如果（图像==“light\u off.png”）{
console.log（light.src）；
light.src=”file:///H:/mydir/images/light_on.png";
}
否则{
console.log（light.src）；
light.src=”file:///H:/mydir/images/light_off.png";
}
});
这是否有被否决的原因？如果你要投否决票，请解释为什么被否决。
// 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')
  }
});