title: Selecting all <td> elements using javascript and jQuery
body: <p>I am trying to select all <code>&lt;td&gt;</code> elements that were created through Javascript and add a click event to them. In my code, I added the click event listener to all td's at the bottom of the fillTable() function after creating the td elements, however I am receiving an error stating &quot;addEventListener is not a function.&quot; Why is this not working?</p>
  <p>I have also tried</p>
  <pre><code>getElementsByTagName(&quot;td&quot;).addEventListener(&quot;click&quot;, clickEvent);
  </code></pre>
  <p>but that did not work either. I made sure to include it after the dom loaded, so I think it is the way I am selecting the elements. Any help is appreciated. Thanks</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-js lang-js prettyprint-override"><code>let categories = [];
  let catsAndClues = [];
  
  // create Jeopardy Title and Start/Reset button
  $("body").append(`
      &lt;h1 id="title"&gt;JEOPARDY!&lt;/h1&gt;
      &lt;div id="button-div"&gt;
          &lt;button id="button" data-startBtn="true"&gt;Start!&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="game-board"&gt;
      &lt;/div&gt;`)
  
  async function getCategoryIds() {
      // save random number from one to 18000 to randomInt
      // randomInt will be used as the "offset" parameter to get a random sequence of categories
      let randomInt = Math.floor((Math.random() * 18000) + 1);
      let res = await axios.get(`http://jservice.io/api/categories?count=100&amp;offset=${randomInt}`);
      // create a loop to iterate until the categories array contains 6 items
      for (let i=0;categories.length&lt;6;i++){
          // pull random ID number from the 100 categories pulled from API
          let i= Math.floor((Math.random() * 100) + 1);
          let randomCatId= res.data[i].id;
          // if categories array does not include the randomCatId, add it to the categories array
          if (!categories.includes(randomCatId)){
              categories.push(randomCatId);
          }
          console.log(categories);
      }
  }
  
  
  async function getCategory(catId) {
      // retreive clues from API with the category ID parameter
      let res = await axios.get(`http://jservice.io/api/clues?category=${catId}`);
      // use .map function to return object displaying question, answer, and "showing"
      // properties for every item in the data's array
      let clueGroup = res.data.map(clue =&gt; {
          return {
            question: clue.question,
            answer: clue.answer,
            showing: null,
          };
      })
      console.log("clueGroup:", clueGroup);
      let clueArray = [];
      for (let i=0;clueArray.length&lt;5;i++){
          // pull random clue from the clues array and save to variable
          let i= Math.floor((Math.random() * clueGroup.length));
          let randomClue= clueGroup[i];
          // if categories array does not include the randomCatId, add it to the categories array
          if (!clueArray.includes(randomClue)){
              clueArray.push(randomClue);
          }
      };
      // define obj to show category title and list of all clues within the category
      console.log("clueArray: ", clueArray);
      console.log(res.data[0].category.title);
      return {title: res.data[0].category.title, clues: clueArray};
  }
  
  function fillTable() {
      $("#game-board").append(
          `&lt;table id="table"&gt;
          &lt;thead&gt;
              &lt;tr id="header-row"&gt;
                  &lt;th&gt;${catsAndClues[0].title}&lt;/th&gt;
                  &lt;th&gt;${catsAndClues[1].title}&lt;/th&gt;
                  &lt;th&gt;${catsAndClues[2].title}&lt;/th&gt;
                  &lt;th&gt;${catsAndClues[3].title}&lt;/th&gt;
                  &lt;th&gt;${catsAndClues[4].title}&lt;/th&gt;
                  &lt;th&gt;${catsAndClues[5].title}&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td data-question= "${catsAndClues[0].clues[0].question}" 
                        data-answer= "${catsAndClues[0].clues[0].answer}" 
                       data-showing= "${catsAndClues[0].clues[0].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[1].clues[0].question}" 
                        data-answer= "${catsAndClues[1].clues[0].answer}" 
                       data-showing= "${catsAndClues[1].clues[0].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[2].clues[0].question}" 
                        data-answer= "${catsAndClues[2].clues[0].answer}" 
                       data-showing= "${catsAndClues[2].clues[0].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[3].clues[0].question}" 
                        data-answer= "${catsAndClues[3].clues[0].answer}" 
                       data-showing= "${catsAndClues[3].clues[0].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[4].clues[0].question}" 
                        data-answer= "${catsAndClues[4].clues[0].answer}" 
                       data-showing= "${catsAndClues[4].clues[0].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[5].clues[0].question}" 
                        data-answer= "${catsAndClues[5].clues[0].answer}" 
                       data-showing= "${catsAndClues[5].clues[0].showing}"&gt;?
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td data-question= "${catsAndClues[0].clues[1].question}" 
                        data-answer= "${catsAndClues[0].clues[1].answer}" 
                       data-showing= "${catsAndClues[0].clues[1].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[1].clues[1].question}" 
                        data-answer= "${catsAndClues[1].clues[1].answer}" 
                       data-showing= "${catsAndClues[1].clues[1].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[2].clues[1].question}" 
                        data-answer= "${catsAndClues[2].clues[1].answer}" 
                       data-showing= "${catsAndClues[2].clues[1].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[3].clues[1].question}" 
                        data-answer= "${catsAndClues[3].clues[1].answer}" 
                       data-showing= "${catsAndClues[3].clues[1].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[4].clues[1].question}" 
                        data-answer= "${catsAndClues[4].clues[1].answer}" 
                       data-showing= "${catsAndClues[4].clues[1].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[5].clues[1].question}" 
                        data-answer= "${catsAndClues[5].clues[1].answer}" 
                       data-showing= "${catsAndClues[5].clues[1].showing}"&gt;?
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td data-question= "${catsAndClues[0].clues[2].question}" 
                        data-answer= "${catsAndClues[0].clues[2].answer}" 
                       data-showing= "${catsAndClues[0].clues[2].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[1].clues[2].question}" 
                        data-answer= "${catsAndClues[1].clues[2].answer}" 
                       data-showing= "${catsAndClues[1].clues[2].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[2].clues[2].question}" 
                        data-answer= "${catsAndClues[2].clues[2].answer}" 
                       data-showing= "${catsAndClues[2].clues[2].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[3].clues[2].question}" 
                        data-answer= "${catsAndClues[3].clues[2].answer}" 
                       data-showing= "${catsAndClues[3].clues[2].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[4].clues[2].question}" 
                        data-answer= "${catsAndClues[4].clues[2].answer}" 
                       data-showing= "${catsAndClues[4].clues[2].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[5].clues[2].question}" 
                        data-answer= "${catsAndClues[5].clues[2].answer}" 
                       data-showing= "${catsAndClues[5].clues[2].showing}"&gt;?
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td data-question= "${catsAndClues[0].clues[3].question}" 
                        data-answer= "${catsAndClues[0].clues[3].answer}" 
                       data-showing= "${catsAndClues[0].clues[3].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[1].clues[3].question}" 
                        data-answer= "${catsAndClues[1].clues[3].answer}" 
                       data-showing= "${catsAndClues[1].clues[3].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[2].clues[3].question}" 
                        data-answer= "${catsAndClues[2].clues[3].answer}" 
                       data-showing= "${catsAndClues[2].clues[3].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[3].clues[3].question}" 
                        data-answer= "${catsAndClues[3].clues[3].answer}" 
                       data-showing= "${catsAndClues[3].clues[3].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[4].clues[3].question}" 
                        data-answer= "${catsAndClues[4].clues[3].answer}" 
                       data-showing= "${catsAndClues[4].clues[3].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[5].clues[3].question}" 
                        data-answer= "${catsAndClues[5].clues[3].answer}" 
                       data-showing= "${catsAndClues[5].clues[3].showing}"&gt;?
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td data-question= "${catsAndClues[0].clues[4].question}" 
                        data-answer= "${catsAndClues[0].clues[4].answer}" 
                       data-showing= "${catsAndClues[0].clues[4].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[1].clues[4].question}" 
                        data-answer= "${catsAndClues[1].clues[4].answer}" 
                       data-showing= "${catsAndClues[1].clues[4].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[2].clues[4].question}" 
                        data-answer= "${catsAndClues[2].clues[4].answer}" 
                       data-showing= "${catsAndClues[2].clues[4].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[3].clues[4].question}" 
                        data-answer= "${catsAndClues[3].clues[4].answer}" 
                       data-showing= "${catsAndClues[3].clues[4].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[4].clues[4].question}" 
                        data-answer= "${catsAndClues[4].clues[4].answer}" 
                       data-showing= "${catsAndClues[4].clues[4].showing}"&gt;?
                  &lt;/td&gt;
                  &lt;td data-question= "${catsAndClues[5].clues[4].question}" 
                        data-answer= "${catsAndClues[5].clues[4].answer}" 
                       data-showing= "${catsAndClues[5].clues[4].showing}"&gt;?
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;`);
          $("td").addEventListener("click", clickEvent);
  }
  // document.addEventListener("click", function(e){console.dir(e.target);});
  // document.addEventListener("click", function(e){console.dir(e.target.dataset.question);});
  // document.addEventListener("click", function(e){console.dir(e.target.dataset.answer);});
  // document.addEventListener("click", function(e){console.dir(e.target.dataset.showing);});
  /** Handle clicking on a clue: show the question or answer.
   *
   * Uses .showing property on clue to determine what to show:
   * - if currently null, show question &amp; set .showing to "question"
   * - if currently "question", show answer &amp; set .showing to "answer"
   * - if currently "answer", ignore click
   * */
  
  
  
  function clickEvent(e) {
      let tile = e.target;
      let question = tile.dataset.question;
      let answer = tile.dataset.answer;
      let showing = tile.dataset.showing;
      console.log(question, answer, showing);
      // if (tile.showing == "answer"){
      //     return};
  
      // if (!showing){
      //     tile.innerHTML = question;
      //     showing = "question"
      // }
      // else if (showing == question){
      //     tile.innerHTML = answer;
      //     showing = "answer"
      // }
      // else {return}
  }
  
  
  
  async function setupAndStart() {
      await getCategoryIds();
      console.log(catsAndClues);
      for (let i=0;catsAndClues.length&lt;6;i++){
          let tempVar = await getCategory(categories[i]);
          catsAndClues[i] = tempVar;
      }
      console.log(catsAndClues);
      fillTable();
  
  }
  setupAndStart()</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* some colors you may find useful:
    #115ff4
    #060ce9
    #28a200
    #8d2ab5
    #74119c
  */
  
  body {
    background-color: black;
    font-family: Helvetica;
  }
  
  #title {
    text-align: center;
    color: white;
    text-shadow: 4px 4px black;
    font-size: 5em;
    margin: 5px 5px 15px 5px;
  }
  
  #button-div{
    text-align: center;
    margin-bottom: 2em;
  }
  
  #button{
    padding: 5px 20px 5px 20px;
    font-family: Helvetica;
  }
  
  table {
    margin-left:auto; 
    margin-right:auto;
    background-color: black; 
  }
  
  th {
    text-transform: uppercase;
    border: 3px solid black;
    width: 150px;
    height: 100px;
    background-color: #060ce9;
  }
  
  td {
    text-align: center;
    width: 150px;
    height: 100px;
    vertical-align: middle;
    font-size: .5em;
    background-color: #060ce9;
  }
  
  
  table, td {
    border: 3px solid black;
  }
  
  #header-row {
    color: white;
    margin-bottom: 10px;
    font-size: 1em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Copse&amp;display=swap"
          rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="jeopardy.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script src="https://unpkg.com/jquery"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/axios/dist/axios.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/lodash"&gt;&lt;/script&gt;
  &lt;script src="jeopardy.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>