使用函数交换img src（JavaScript）

Question

我正在尝试在网页中交换两个img，但无法解决为什么此代码无效的问题。 任何帮助，将不胜感激。

这是在HTML文件中：

<img onclick="swap(); "src="LaptopThin.jpg" id="LaptopPicture" />

而这是在单独的javascript文件中：

 function swap()
  {
     var picture = document.getElementById('LaptopPicture').src;
     if (picture === 'LaptopThin.jpg') {
         picture.src = 'ServerRack.jpg';
     } else {
         picture.src = 'LaptopThin.jpg';
     }

我将代码更改为：

      function swap()
  {
     var picture = document.getElementById('LaptopPicture');
     if (picture.src === 'LaptopThin.jpg') {
         picture.src = 'ServerRack.jpg';
     } else {
         picture.src = 'LaptopThin.jpg';
     }
  }

并且html文件中的图片仍然没有任何改变。 img停留在Laptopthin.jpg上

Answer 1

您无法设置picture的src属性，因为您已经将picture设置为元素的src属性。

更改这些行：

var picture = document.getElementById('LaptopPicture').src;
if (picture === 'LaptopThin.jpg') {

这些：

var picture = document.getElementById('LaptopPicture');
if (picture.src === 'LaptopThin.jpg') {

Answer 2

这是因为src属性将提供图像源的绝对值，而不仅仅是src属性设置的值

function swap() {
    var picture = document.getElementById('LaptopPicture');
    if (picture.src.indexOf('LaptopThin.jpg') > -1) {
        picture.src = 'ServerRack.jpg';
    } else {
        picture.src = 'LaptopThin.jpg';
    }
}

---

另一个尝试的方法是使用getAttribute

function swap() {
    var picture = document.getElementById('LaptopPicture');
    if (picture.getAttribute('src')== 'LaptopThin.jpg') {
        picture.src = 'ServerRack.jpg';
    } else {
        picture.src = 'LaptopThin.jpg';
    }
}