Измените img src методом onclick

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

Вот рабочий код, используйте .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 2

Попробуйте это:

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

Связано setAttribute

Answer 3

Как я сказал в комментарии, вы не должны хранить свои данные в 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. Или вы можете изменить или удалить некоторые изображения, просто манипулируя массивом.

Answer 4

Как указано другими, вы должны указать RHS выражения как второй аргумент в setAttribute. Кроме того, вы проверяли, входит ли он в блок условия if для установки значения атрибута? Может случиться, что ни одно из ваших условий не вернет true, и вам, возможно, придется использовать indexOf или относительный путь к изображению вместо точного соответствия.

Answer 5

Вы должны

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>