Изменение картинки кнопки за счет onclick и внешнего файла JS

Question

Кнопка служит для взаимодействия с музыкой: она либо включает, либо выключает ее. Помимо должна меняться картинка в кнопке, но у меня изображения не распознаются и нет ошибки в консоли.

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("MyBut").click();
});

function ChangeM(){   

var image = document.getElementById("image");
var myaudio = document.getElementById("myaudio");   
      if(myaudio.paused == true){
        myaudio.play()
        image.src="../img/Music_on.png"
      }else if (myaudio.paused == false){
       myaudio.pause()
        image.src="../img/Music_off.png"
      }
}

<html>

<head>
  <script src="js/Main.js"></script>
</head>

<body>

  <div>

   <button class="MusBut" id="MyBut" type="button" onclick="ChangeM()" myaudio="true">
   <img src="img/Music_off.png" alt="#" width="70" height="65" id="image"/>
   </button>
   <audio id="myaudio">
   <source src="snd/erik-satie-gymnopedie-no-1.mp3" type="audio/mpeg"/>
   </audio>

  </div>

</body>

</html>

Answer 1

Можно использовать div и атрибут background-image

<div id="play-button" style="background-repeat: no-repeat;"></div>

И в скрипте обращаться к этому свойству

var image = document.getElementById("play-button");
var myaudio = document.getElementById("myaudio");   
if(myaudio.paused == true){
    myaudio.play();
    image.style.backgroundImage = "url(pause.png)";
}else if (myaudio.paused == false){
    myaudio.pause();
    image.style.backgroundImage = "url(play.png)";
}

БЛОГ НА HUSL

Изменение картинки кнопки за счет onclick и внешнего файла JS

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