Is there a way to verify the presence of a particular value in a list?

Question

Is there a way to verify the presence of a particular value in a list?

I need to validate the content of all li tags within a ul list. If any list item contains the text "None," then I want to append specific text to a div. If no li tag includes "None," then different text should be added to the div.

Upon checking my code, I encountered the following error in the console:

Uncaught TypeError: can't access property "includes", mylist.textContent is undefined

It appears that I may not be utilizing the .includes() method properly.

var mydiv = document.querySelector("#mydiv");
var mylist = document.querySelectorAll("#mylist li");
var myresult = mylist.textContent.includes("None");

if (myresult == true) {
  mydiv.textContent = "Result is True";
} else {
  mydiv.textContent = "Result is False";
}

My HTML:

<ul id="mylist">
  <li>item 1</li>
  <li>item 2</li>
  <li>None</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>

<ul id="mydiv">
</ul>

javascript

Answer 1

Answer №1

querySelectorAll function retrieves a list of elements, making it impossible to directly check the textContent of a specific element.

I recommend converting the list into an array using spread syntax to enable the use of array methods. You can then utilize some method to evaluate your condition.

var mydiv = document.querySelector("#mydiv");
var mylist = document.querySelectorAll("#mylist li");
var myresult = [...mylist].some(item => item.textContent.includes("None"));

if (myresult === true) {
  mydiv.textContent = "Result is True";
} else {
  mydiv.textContent = "Result is False";
}

<ul id="mylist">
  <li>item 1</li>
  <li>item 2</li>
  <li>None</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>

<ul id="mydiv">
</ul>

Answer 2

querySelectorAll function retrieves a list of elements, making it impossible to directly check the textContent of a specific element.

I recommend converting the list into an array using spread syntax to enable the use of array methods. You can then utilize some method to evaluate your condition.

var mydiv = document.querySelector("#mydiv");
var mylist = document.querySelectorAll("#mylist li");
var myresult = [...mylist].some(item => item.textContent.includes("None"));

if (myresult === true) {
  mydiv.textContent = "Result is True";
} else {
  mydiv.textContent = "Result is False";
}

<ul id="mylist">
  <li>item 1</li>
  <li>item 2</li>
  <li>None</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
</ul>

<ul id="mydiv">
</ul>

Is there a way to verify the presence of a particular value in a list?

Answer №1

Similar questions

Exploring various queries in Firestore

The issue with GatsbyJS and Contentful: encountering undefined data

The Child component is unable to render initially due to the Context API being undefined during the first render of the Child component

Navigating to a different page using the browser address bar causes the context to be reset

Incorporating lodash into Angularjs for enhanced functionality

Node-fetch enables dynamic requests

Looking for assistance with reviewing and optimizing Angular UI-Router implementation

Keep JS Accordion open when links are clicked

How to access vue.js 3 single file component functions from within a script tag

Pause a YouTube video automatically when the window is not in focus using FancyBox

Creating dynamic and engaging animations for components using ReactCSSTransitionGroup

View is unable to trigger the success attribute

Unfulfilled commitment on bcrypt

Prevent the Swiper slider from autoplaying while a video is being played, and automatically move to the next slide once the video is paused or

React - callbackFromApp function is executing only one time when clicked

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

In JavaScript, the event.defaultPrevented property will never be set to true

Revamping this snippet - JavaScript with NodeJs

Introducing Block Insert feature in React Draft-js - a powerful

Gathering the presently unfinished observables within a superior-level rxjs observable