Javascript 使用onclick方法更改img src

当我点击img时，我想更改我的img来源。 （当我点击img1时，我想看到img2。当我点击img2时，我想看到img3。等等）

我在发帖之前查阅了很多帖子。他们中的许多人给出了相同的答案。这是我的代码：

<article id="article"><h1 class="titre">ROADTRIP</h1>    

<img id="roadtrip" src="img/roadtrip.jpg" alt="" onclick="clickimg()" />

    <script>
    function clickimg() {
        if (document.getElementById("roadtrip").getAttribute('src')=='img/roadtrip.jpg')
        {
            document.getElementById("roadtrip").setAttribute('src') = 'img/roadtrip2.png';
        }
        else if (document.getElementById("roadtrip").getAttribute('src') == 'img/roadtrip2.png')
        {
            document.getElementById("roadtrip").src = 'img/roadtrip.jpg';
        }
    }
    </script>
</article>

公路旅行
函数clickimg（）{
if（document.getElementById（“roadtrip”）.getAttribute（'src'）=='img/roadtrip.jpg'）
{
document.getElementById（“roadtrip”）.setAttribute（'src'）='img/roadtrip2.png'；
}
else if（document.getElementById（“roadtrip”）.getAttribute（'src'）=='img/roadtrip2.png'）
{
document.getElementById（“roadtrip”）.src='img/roadtrip.jpg'；
}
}

我的图像出现了，但当我点击它时，什么也没有发生

document.getElementById("roadtrip").setAttribute('src', 'img/roadtrip2.png');

---

相关的

这是工作代码，请使用

.src

而不是

.setAttribute

公路旅行
函数clickimg（）{
if（document.getElementById（“roadtrip”）.getAttribute（'src'）='https://spaceholder.cc/700x500')
{
document.getElementById（“roadtrip”）.src='10〕http://www.placebear.com/700/500';
}
else if（document.getElementById（“roadtrip”）.getAttribute（'src'）='http://www.placebear.com/700/500')
{
document.getElementById（“roadtrip”）.src='10〕https://spaceholder.cc/700x500';
}
}

您应该

document.getElementById("roadtrip").setAttribute('src', SRC_Value);

或：

请参阅下面的代码片段

var src1=”https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png"
var src2=”https://static.wixstatic.com/media/0ca0ca_b9a2fe29d4be46179bea5a20ae7afd12~mv2.png/v1/fill/w_672，h_316，al_c，q_80，usm_0.66_1.00_0.01/png-sample-1.webp“
函数clickimg（）{
if（document.getElementById（“roadtrip”）.getAttribute（'src'）==src1）
{
document.getElementById（“roadtrip”）.setAttribute（'src'，src2）；
}
else if（document.getElementById（“roadtrip”）.getAttribute（'src'）==src2）
{
document.getElementById（“roadtrip”）.src=src1；
}
}

公路旅行

正如其他人所指定的，必须将表达式的RHS作为setAttribute中的第二个参数。另外，您是否检查了它是否进入if条件块来设置属性值？

---

在这种情况下，您的任何条件都不会返回true，您可能必须使用indexOf或相对映像路径来进行精确匹配。

正如我在评论中所说的，您不应该将数据存储在DOM中。这样做过于复杂，维护起来非常困难，执行起来非常缓慢。相反，将图像地址存储到JS数组中，并保留用于显示图像的索引簿，如下所示：

在HTML中，传递事件对象：

onclick=“clickimg（event）”

，或者在脚本中添加事件侦听器：

const imgs = [
    'img/image1.jpg',
    'img/image2.jpg',
    'img/image3.jpg'
];
let index = 0;
document.getElementById('roadtrip').addEventListener(
    'click', clickimg // If you'll do this, remove the onclick attribute from the img tag
);
function clickimg (e) {
    e.target.src = imgs[index]; // Change the src of the clicked image
    index = ++index % imgs.length; // Increase index, shows the first image when the length of the array is reached
}

---

这样，图像地址很容易维护，如果您需要更多图像，只需向

imgs

array添加一个地址即可。或者，您也可以通过操作阵列来更改或删除某些图像。

控制台中应该会出现错误。另外，您不应该将数据存储在DOM中。将图像源地址存储到JS数组中，并保留用于显示图像的索引簿。或者，也可以像OP在代码后半部分中所做的那样使用

.src=

。谢谢，这两种方法都很有效。我有了解决方案，但没有看到我犯的错误。

getAttribute

只返回值，不指向src，它得到src的克隆。如果更改克隆，则不会更改原始版本。谢谢，这两种方法都可以使用。我有解决办法，但没有看到我犯的错误。

const imgs = [
    'img/image1.jpg',
    'img/image2.jpg',
    'img/image3.jpg'
];
let index = 0;
document.getElementById('roadtrip').addEventListener(
    'click', clickimg // If you'll do this, remove the onclick attribute from the img tag
);
function clickimg (e) {
    e.target.src = imgs[index]; // Change the src of the clicked image
    index = ++index % imgs.length; // Increase index, shows the first image when the length of the array is reached
}