Невозможно заставить работать функцию с именем "kareoke"

Question

Функция не работает, когда ее имя «kareoke»

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

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>

Answer 1

Измените ваши имена еще.

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

kareoke = document.getElementById("kareoke");

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

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

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