title: index.js:66 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText') at HTMLDivElement.<anonymous> (index.js:66)
body: <p>I was trying to create a drumstick website as a part of #javascript30 challenge, but I am getting the following error:</p>
  <blockquote>
  <p>index.js:66 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText') at HTMLDivElement. (index.js:66)</p>
  </blockquote>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function playAudio(key) {
    switch (key) {
      case 'a':
      case 'A':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 's':
      case 'S':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'd':
      case 'D':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'f':
      case 'F':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'g':
      case 'G':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'h':
      case 'H':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'j':
      case 'J':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'k':
      case 'K':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
  
      case 'l':
      case 'L':
        var clap = new Audio("sounds/clap.wav");
        clap.play();
        break;
      default:
        console.log(key);
    }
  }
  
  // To produce sound when the drum is CLICKED
  for (var i = 0; i &lt; document.querySelectorAll(".key").length; ++i) {
    // console.log(i);
  
    document.querySelectorAll(".key")[i].addEventListener("click", function() {
      var keyPress = document.getElementsByTagName("kbd")[i].innerText; //  !!problem in this line!!
      playAudio(keyPress);
      buttonAnimation(keyPress);
    });
  
  }
  
  // To produce sound when the drum key is pressed
  document.addEventListener("keypress", function(event) { //call back funtion passes back evt obj
    playAudio(event.key);
    buttonAnimation(event.key);
  });
  
  
  
  function buttonAnimation(currentKey) {
    try {
      document.querySelector("." + currentKey.toUpperCase()).classList.add("playing");
      setTimeout(function() {
        document.querySelector("." + currentKey.toUpperCase()).classList.remove("playing");
      }, 100);
    } catch (err) {
      console.log(err.message);
    }
  
  }
  
  for (var i = 0; i &lt; document.querySelectorAll(".key").length; ++i) {
    // console.log(i);
  
    document.querySelectorAll(".key")[i].addEventListener("click", function() {
      var keyPress = document.getElementsByTagName("kbd")[i].innerText; //  !!problem in this line!!
      playAudio(keyPress);
      buttonAnimation(keyPress);
    });
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="keys"&gt;
    &lt;div class="A key"&gt;
      &lt;kbd&gt;A&lt;/kbd&gt;
      &lt;span class="sound"&gt;clap&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="S key"&gt;
      &lt;kbd&gt;S&lt;/kbd&gt;
      &lt;span class="sound"&gt;hihat&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="D key"&gt;
      &lt;kbd&gt;D&lt;/kbd&gt;
      &lt;span class="sound"&gt;kick&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="F key"&gt;
      &lt;kbd&gt;F&lt;/kbd&gt;
      &lt;span class="sound"&gt;openhat&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="G key"&gt;
      &lt;kbd&gt;G&lt;/kbd&gt;
      &lt;span class="sound"&gt;boom&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="H key"&gt;
      &lt;kbd&gt;H&lt;/kbd&gt;
      &lt;span class="sound"&gt;ride&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="J key"&gt;
      &lt;kbd&gt;J&lt;/kbd&gt;
      &lt;span class="sound"&gt;snare&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="K key"&gt;
      &lt;kbd&gt;K&lt;/kbd&gt;
      &lt;span class="sound"&gt;tom&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="L key"&gt;
      &lt;kbd&gt;L&lt;/kbd&gt;
      &lt;span class="sound"&gt;tink&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>