Как правильно прописать функцию во внешнем JS, вызываемую через onclick с html

Question

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

Исходный код (пишу в adobe dreamweaver, но она не сообщает о проблеме):

function ChangeM(){   
document.getElementById("MyBut").innerHTML = "myaudio"
    
var myaudio = this.getAttribute("myaudio"); 
      if(myaudio.paused == true)
      {
        document.getElementById("myaudio").play();
             }
      else if (myaudio.paused == false)
      {
        document.getElementById("myaudio").pause();
      }
}
ChangeM();

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

<div>
            
<button class="MusBut" id="MyBut" type="button" onclick="ChangeM()" >Click</button>
            
 <audio id="myaudio"> <source src="snd/erik-satie-gymnopedie-no-1.mp3" type="audio/mp3"/>
 </audio>
                        
</div>
    
</body>
</html>

Answer 1

Подключите ваш .js файл перед закрывающим тегом body. Или же добавьте атрибут "defer".

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

Answer 2

function ChangeM(el) {
              // ^-----Добавить
  document.getElementById("MyBut").innerHTML = "myaudio"

  var myaudio = el.getAttribute("myaudio");
              // ^------------ Заменить
  if (myaudio.paused == true) {
    document.getElementById("myaudio").play();
  } else if (myaudio.paused == false) {
    document.getElementById("myaudio").pause();
  }
}

document.getElementById('MyBut').click();
//ChangeM(); ---Удалить

<html>

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

<body>

  <div>

    <button class="MusBut" id="MyBut" type="button" onclick="ChangeM(this)" myaudio="true">Click</button>
    <!-- Тут тоже пара изменений -->

    <audio id="myaudio"> <source src="snd/erik-satie-gymnopedie-no-1.mp3" type="audio/mp3"/>
 </audio>

  </div>

</body>

</html>

БЛОГ НА HUSL

Как правильно прописать функцию во внешнем JS, вызываемую через onclick с html

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