使用onclick方法更改img src

时间:2019-10-21 10:12:56

标签: javascript html image onclick

当我单击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>

我的图像出现了,但是当我单击它时,什么也没发生

5 个答案:

答案 0 :(得分:1)

尝试一下:

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

相关的setAttribute

答案 1 :(得分:1)

这里是有效代码,请使用.src而不是.setAttribute

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

<img id="roadtrip" src="https://spaceholder.cc/700x500" alt="" onclick="clickimg()" />

    <script>
    function clickimg() {
        if (document.getElementById("roadtrip").getAttribute('src')=='https://spaceholder.cc/700x500')
        {
            document.getElementById("roadtrip").src = 'http://www.placebear.com/700/500';
        }
        else if (document.getElementById("roadtrip").getAttribute('src') == 'http://www.placebear.com/700/500')
        {
            document.getElementById("roadtrip").src = 'https://spaceholder.cc/700x500';
        }
    }
    </script>
</article>

答案 2 :(得分:1)

正如我在评论中所说,您不应将数据存储在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数组中即可。或者,您也可以只通过操作数组来更改或删除某些图像。

答案 3 :(得分:0)

您应该

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

或:

document.getElementById("roadtrip").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"

function 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;
        }
}
<article id="article"><h1 class="titre">ROADTRIP</h1>    
    <img id="roadtrip" src="https://developer.chrome.com/extensions/examples/api/extension/isAllowedAccess/sample-128.png" alt="" onclick="clickimg()" />
</article>

答案 4 :(得分:0)

如其他规定,您必须将表达式的RHS作为setAttribute中的第二个参数。另外,您是否检查过是否要进入if条件块来设置属性值? 可能是您的条件都不返回true的情况,您可能必须使用indexOf或相对图像路径来进行完全匹配。