title: Unable to get function named "kareoke" to work
body: <p>Function doesn't work when its name is "kareoke"</p>
  
  <p>I have created a function by the name of "kareoke", and try to call it on click event but it worked just once then i get that error message in my browser console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: kareoke is not a function at
    HTMLButtonElement.onclick</p>
  </blockquote>
  
  <p>But when I changed the name of the function, it worked seamlessly. By the way I noticed that I misspelled karaoke but isn't a function supposed to work no matter what name I give to it? I didn't get why the function didn't work when its name is "kareoke".</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.active {
    display: block;
  }
  
  .hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="active" id="main-music"&gt;
    &lt;audio src="https://amazingaudioplayer.com/wp-content/uploads/amazingaudioplayer/1/audios/In the Moment of Inspiration.mp3" controls&gt;&lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div class="hidden" id="kareoke"&gt;
    &lt;audio src="https://vocaroo.com/media_command.php?media=s0gKkQ7HPhtN&amp;command=download_mp3" controls&gt;&lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;button onclick="kareoke()"&gt;Show Hide&lt;/button&gt;
  &lt;script&gt;
    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";
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>