title: Why My Javascript random selector not working?
body: <p>I want some help on this problem. I'm trying to get my JavaScript to highlight random picks that I enter in but its not working.</p>
  <p>I keep getting a error message when I inspect my JS code on the webpage saying</p>
  <pre><code>&quot;Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
      at highlightTag (script.js:52:9)
      at script.js:38:9&quot; 
  </code></pre>
  <p>Here's the all the code below:</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>const tagsEl = document.getElementById('tags')
  const textarea = document.getElementById('textarea')
  
  textarea.focus()
  
  textarea.addEventListener('keyup', (e) =&gt; {
    createTags(e.target.value)
  
    if (e.key === 'Enter') {
      setTimeout(() =&gt; {
        e.target.value = ''
      }, 10)
  
      randomSelect()
    }
  })
  
  function createTags(input) {
    const tags = input.split(',').filter(tag =&gt; tag.trim() !==
      '').map(tag =&gt; tag.trim())
  
    tagsEl.innerHTML = ''
  
    tags.forEach(tag =&gt; {
      const tagEl = document.createElement('span')
      tagEl.classList.add('tag')
      tagEl.innerText = tag
      tagsEl.appendChild(tagEl)
    })
  }
  
  function randomSelect() {
    const times = 30
  
    const interval = setInterval(() =&gt; {
      const randomTag = pickRandomTag()
  
      highlightTag(randomTag)
  
      setTimeout(() =&gt; {
        unHighlightTag(randomTag)
      }, 100)
    }, 100);
  }
  
  function pickRandomTag() {
    const tags = document.querySelectorAll('.tag')
    return tags[Math.floor(Math.random() * tags.length)]
  }
  
  function highlightTag(tag) {
    tag.classList.add('hightlight')
  }
  
  function unHighlightTag(tag) {
    tag.classList.remove('hightlight')
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    background-color: #2b88f0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }
  
  h3 {
    color: #fff;
    margin: 10px 0 20px;
    text-align: center;
  }
  
  .container {
    width: 500px;
  }
  
  textarea {
    border: none;
    display: block;
    width: 100%;
    height: 100px;
    font-family: inherit;
    padding: 10px;
    margin: 0 0 20px;
    font-size: 16px;
  }
  
  .tag {
    background-color: #f0932b;
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 0 5px 10px 0;
    font-size: 14px;
    display: inline-block;
  }
  
  .tag.highlight {
    background-color: #273c75;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap&amp;ext=.css" rel="stylesheet" /&gt;
  
  &lt;div class="container"&gt;
    &lt;h3&gt;Enter all of the choices divided by a comma (','). &lt;br&gt; Press Enter when you are done&lt;/h3&gt;
    &lt;textarea placeholder="Enter choices here..." id="textarea"&gt;&lt;/textarea&gt;
    &lt;div id="tags"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>