Fungsi tidak berfungsi saat namanya "kareoke"

Saya telah membuat fungsi dengan nama "kareoke", dan mencoba memanggilnya pada acara klik tetapi berhasil hanya sekali kemudian saya mendapatkan pesan kesalahan itu di konsol browser saya:

TypeError Tidak Tertangkap: kareoke bukan fungsi di HTMLButtonElement.onclick

Tetapi ketika saya mengubah nama fungsinya, itu bekerja dengan mulus. Omong-omong, saya perhatikan bahwa saya salah mengeja karaoke tetapi bukankah suatu fungsi seharusnya berfungsi tidak peduli apa nama yang saya berikan padanya? Saya tidak mengerti mengapa fungsinya tidak berfungsi ketika namanya "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 27 Oktober 2019, 15:12

1 menjawab

Jawaban Terbaik

Variasikan nama Anda lebih banyak.

Pertama kali Anda memanggil fungsi, itu memang sebuah fungsi. Tapi apa fungsi itu lakukan? Antara lain, ini:

kareoke = document.getElementById("kareoke");

Pada lingkup jendela ini menimpa variabel kareoke dengan sesuatu yang lain, sesuatu yang bukan fungsi. Jadi, setiap upaya di masa mendatang untuk memanggilnya akan menghasilkan kesalahan.

Jangan gunakan kembali nama variabel yang sama. (Setidaknya tidak dalam lingkup campuran dan tidak dalam program sekecil itu.) Dan, sebagai praktik yang baik, pertahankan lingkup lokal ke fungsi dengan mendeklarasikan variabel dengan var, let, atau const. Sesuatu seperti ini:

function kareoke() {
  let mainMusic = document.getElementById("main-music");
  let kareokeElement = document.getElementById("kareoke");
  //...
}
3
David 27 Oktober 2019, 12:17