Смена изображений по нажатию на них

Question

Сайт должен при нажатии на изображение менять картинку и воспроизводить аудио, при повторном нажатии менять картинку на исходную и останавливать аудио. Я пытался реализовать это следующим способом:

<html>
    <head>
    <title>Смена картинок</title>
</head>
<body>
    <audio id="one" src="/audio/псков.mp3" loop></audio>
<img id="one" src="/jpg/him.jpg" onClick="play('one')"></img>
   <audio id="two" src="/audio-2/videoplayback (29).mp3" loop></audio>
<img id="two" src="/jpg/goeg.jpg" onClick="play('two')"></img>
<script>
    var i=1;
    var img=new Array('/jpg/goeg.jpg', "/jpg/bb.jpg");
    var imag=new Array('/jpg/him.jpg', "/jpg/tols.jpg");
function play(id) {
    var audio = document.getElementById(id);
    var image=document.getElementById(id);
    if (audio.paused) {
        audio.play();
    }else{
        audio.pause();
        
    }
    if (i == 2) {
        i = 0;
    }
    if (id="one") {
    var image=document.getElementById("image");
    image.src=img[i];
    i++;
    console.log(i);
    } else if (id="two") {
    image.src=imag[i];
    i++;
    console.log(i);
    }
}
</script>
</body>
</html>

Почему-то при нажатии на изображение картинка не меняется, но воспроизведение и остановка аудио работают. Буду благодарен, если поможете исправить эту проблему.

Answer 1

var audio = document.getElementById(id);
var image = document.getElementById(id);

Посмотрите внимательно на эти две строчки. Справа от знака = одинаковые выражения. Однако, Вы ожидаете, что будут найдены различные элементы. Почему?

Answer 2

var image=document.getElementById("image");

У вас нет такого id, поэтому вы не получите элемент img

БЛОГ НА HUSL

Смена изображений по нажатию на них

Ответы (2 шт):