使用 onclick 方法更改 img src

Question

當我點擊 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>

我的圖像出現了，但是當我單擊它時，什么也沒有發生

Answer 1

嘗試這個：

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

相關的setAttribute

Answer 2

這是工作代碼，使用.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>

Answer 3

你應該

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>

Answer 4

正如其他人所指定的，您必須將表達式的 RHS 作為 setAttribute 中的第二個參數。 另外，您是否檢查過它是否甚至進入 if 條件塊來設置屬性值？ 可能是您的條件都沒有返回 true 並且您可能不得不使用 indexOf 或相對圖像路徑來進行精確匹配。

Answer 5

正如我在評論中所說，您不應該將數據存儲在 DOM 中。 這樣做過於復雜，維護起來簡直就是一場噩夢，而且執行起來非常緩慢。 相反，將圖像地址存儲到 JS 數組中，並保留用於顯示圖像的索引，如下所示：

在 HTML 中，傳遞事件 object: 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數組中添加一個地址即可。 或者您可以通過操作數組來更改或刪除一些圖像。