What could be causing the malfunction in my JavaScript random selector?

Question

What could be causing the malfunction in my JavaScript random selector?

Can anyone assist me with this issue? I'm attempting to implement JavaScript functionality to highlight randomly selected picks that I input, but it's not functioning correctly.

Every time I inspect my JS code on the webpage, I encounter an error message that reads:

"Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
    at highlightTag (script.js:52:9)
    at script.js:38:9"

Here is the complete code snippet below:

const tagsEl = document.getElementById('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) => {
  createTags(e.target.value)

  if (e.key === 'Enter') {
    setTimeout(() => {
      e.target.value = ''
    }, 10)

    randomSelect()
  }
})

function createTags(input) {
  const tags = input.split(',').filter(tag => tag.trim() !==
    '').map(tag => tag.trim())

  tagsEl.innerHTML = ''

  tags.forEach(tag => {
    const tagEl = document.createElement('span')
    tagEl.classList.add('tag')
    tagEl.innerText = tag
    tagsEl.appendChild(tagEl)
  })
}

function randomSelect() {
  const times = 30

  const interval = setInterval(() => {
    const randomTag = pickRandomTag()

    highlightTag(randomTag)

    setTimeout(() => {
      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')
}

* {
  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;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap&ext=.css" rel="stylesheet" />

<div class="container">
  <h3>Enter all of the choices divided by a comma (','). <br> Press Enter when you are done</h3>
  <textarea placeholder="Enter choices here..." id="textarea"></textarea>
  <div id="tags">

  </div>
</div>
<script src="script.js"></script>

javascript html css highlight

Answer 1

Answer №1

The issue at hand arises from the constant creation of intervals. This results in a scenario where an element is removed, causing the random code to attempt selection and finding nothing, thereby causing the problem. To resolve this, it is crucial to cease the intervals when modifying the tags and validate the existence of an element before attempting to reference it when using innerHTML to generate new tags.

const tagsEl = document.getElementById('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) => {
  createTags(e.target.value)

  if (e.key === 'Enter') {
    setTimeout(() => {
      e.target.value = ''
    }, 10)

    randomSelect()
  }
})

function createTags(input) {
  const tags = input.split(',').filter(tag => tag.trim() !==
    '').map(tag => tag.trim())

  tagsEl.innerHTML = ''

  tags.forEach(tag => {
    const tagEl = document.createElement('span')
    tagEl.classList.add('tag')
    tagEl.innerText = tag
    tagsEl.appendChild(tagEl)
  })
}

let selectInterval = null;
function randomSelect() {
  const times = 30
  
  // Is there an interval running? cancel it
  if (selectInterval) window.clearInterval(selectInterval);

  selectInterval = setInterval(() => {
    const randomTag = pickRandomTag()
    
    // Do we have something to toggle? If no, exit
    if (!randomTag) return;

    highlightTag(randomTag)

    setTimeout(() => {
      unHighlightTag(randomTag)
    }, 1000)
  }, 1000);
}

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')
}

* {
  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.hightlight {
  background-color: #273c75;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap&ext=.css" rel="stylesheet" />

<div class="container">
  <h3>Enter all of the choices divided by a comma (','). <br> Press Enter when you are done</h3>
  <textarea placeholder="Enter choices here..." id="textarea"></textarea>
  <div id="tags">

  </div>
</div>
<script src="script.js"></script>

Answer 2

The issue at hand arises from the constant creation of intervals. This results in a scenario where an element is removed, causing the random code to attempt selection and finding nothing, thereby causing the problem. To resolve this, it is crucial to cease the intervals when modifying the tags and validate the existence of an element before attempting to reference it when using innerHTML to generate new tags.

const tagsEl = document.getElementById('tags')
const textarea = document.getElementById('textarea')

textarea.focus()

textarea.addEventListener('keyup', (e) => {
  createTags(e.target.value)

  if (e.key === 'Enter') {
    setTimeout(() => {
      e.target.value = ''
    }, 10)

    randomSelect()
  }
})

function createTags(input) {
  const tags = input.split(',').filter(tag => tag.trim() !==
    '').map(tag => tag.trim())

  tagsEl.innerHTML = ''

  tags.forEach(tag => {
    const tagEl = document.createElement('span')
    tagEl.classList.add('tag')
    tagEl.innerText = tag
    tagsEl.appendChild(tagEl)
  })
}

let selectInterval = null;
function randomSelect() {
  const times = 30
  
  // Is there an interval running? cancel it
  if (selectInterval) window.clearInterval(selectInterval);

  selectInterval = setInterval(() => {
    const randomTag = pickRandomTag()
    
    // Do we have something to toggle? If no, exit
    if (!randomTag) return;

    highlightTag(randomTag)

    setTimeout(() => {
      unHighlightTag(randomTag)
    }, 1000)
  }, 1000);
}

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')
}

* {
  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.hightlight {
  background-color: #273c75;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap&ext=.css" rel="stylesheet" />

<div class="container">
  <h3>Enter all of the choices divided by a comma (','). <br> Press Enter when you are done</h3>
  <textarea placeholder="Enter choices here..." id="textarea"></textarea>
  <div id="tags">

  </div>
</div>
<script src="script.js"></script>

What could be causing the malfunction in my JavaScript random selector?

Answer №1

Similar questions

Avoid duplicate submissions while still enforcing mandatory fields

Ways to display the ChaptersButton in Videojs-Player

Attempting deletion with Node.js's Mongoose Framework

Creating a bot that will only respond once when a user sends multiple photos simultaneously

Troubleshooting a Laravel 5.2 modal popup issue for password recovery, experiencing a 500 internal server error with the Ajax function execution

Automatically Refresh a Div Element Every 5 Seconds Using jQuery's setInterval() Function

The use of res.sendFile() in node.js is not recognized

Proper HTML style linking with CSS

Ways to conceal ng repeat using ng if

Invoke the parent method within the child application

Guide on submitting a multi-step form using jQuery

Using AngularJS to dynamically update the DOM with the response from a service method

Trouble persisting values with Heroku due to variable issues

What is the best way to prevent a form from being submitted and conduct validation using JavaScript?

Conceal the Angular Material toolbar (top navigation bar) automatically when scrolling downwards

Unable to send message to iframe from a different origin

Customizing the color of a select dropdown in Bootstrap using CSS styling

When CSS 3 checkbox value is toggled to "off", it returns as null

Opening the Gmail app from a link using JavaScript

Enhancing the smoothness of parallax scrolling