Функция не работает, когда ее зовут "караоке"

Я создал функцию с именем «караоке» и пытаюсь вызвать ее по событию щелчка, но это сработало только один раз, после чего я получаю сообщение об ошибке в консоли браузера:

Uncaught TypeError: kareoke не является функцией в HTMLButtonElement.onclick

Но когда я изменил название функции, она работала без проблем. Кстати, я заметил, что я написал караоке с ошибкой, но разве функция не должна работать независимо от того, какое имя я ей даю? Я не понял, почему эта функция не работает, когда ее зовут "kareoke".

.active {
  display: block;
}

.hidden {
  display: none;
}
<div class="active" id="main-music">
  <audio src="https://amazingaudioplayer.com/wp-content/uploads/amazingaudioplayer/1/audios/In the Moment of Inspiration.mp3" controls></audio>
</div>

<div class="hidden" id="kareoke">
  <audio src="https://vocaroo.com/media_command.php?media=s0gKkQ7HPhtN&command=download_mp3" controls></audio>
</div>

<button onclick="kareoke()">Show Hide</button>
<script>
  function kareoke() {
    mainMusic = document.getElementById("main-music");
    kareoke = document.getElementById("kareoke");
    if (mainMusic.className === "active") {
      mainMusic.className = "hidden";
      kareoke.className = "active";
    } else {
      kareoke.className = "hidden";
      mainMusic.className = "active";
    }
  }
</script>
0
Emperyal

1 ответ

Измените свои имена больше.

Когда вы в первый раз вызываете функцию, это действительно функция. Но что делает эта функция? Среди прочего это:

kareoke = document.getElementById("kareoke");

В области окна это переписывает переменную kareoke чем-то другим, чем-то, что не является функцией. Так что любая будущая попытка вызвать ее приведет к ошибке.

Не используйте повторно одни и те же имена переменных. (По крайней мере, не в смешанных областях и не в такой маленькой программе.) И, как хорошая практика, сохраняйте область видимости локальной для функции, объявляя переменные либо с помощью var , let или const . Что-то вроде этого:

function kareoke() {
  let mainMusic = document.getElementById("main-music");
  let kareokeElement = document.getElementById("kareoke");
  //...
}
58579313