用一个函数（JavaScript）交换一个img src

Question

我想在我的网页中交换两个imgs，并且无法包装我的头为什么此代码不起作用。任何帮助，将不胜感激。

这是在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

这是因为，在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'; 
    } 
} 

Answer 2

你不能设置的picture的src属性，因为你设置picture到src已经有一个元素的属性。

更改这些行：

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

这些：

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