How can I check if a specific value exists in a list?

Question

I am trying to check the value of all li tags in a ul list. If any list item contains the value of "None" then it must add specific text into a div. If no li tag contains the value of "None" then different text must be added to the div.

I'm getting the following error in the console:

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

So it seems that I'm not using the .includes() method correctly.

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>

You can't get the text content of a list of elements. You have to look at them individually. — isherwood, Apr 26 '22 at 16:22
So the error is upstream of where you seem to think it is. The critical portion is `mylist.textContent is undefined`. That means that `querySelectorAll` doesn't have a `textContent` property. — isherwood, Apr 26 '22 at 16:23
@isherwood okay, so am I supposed to loop through the "mylist" array, check their .textContent individually, then add the result of each to a new array before using the .includes() method? — Shtarley, Apr 26 '22 at 16:30
@AnuragSrivastava No it doesnt - That user compared getElementsByClassName with getElementById I am well aware that the one is a plural and the other not. I didn't even use getElementsByClassName in my code. — Shtarley, Apr 26 '22 at 16:33
When a dup is linked, please also read the answers, instead of just the question. — Anurag Srivastava, Apr 26 '22 at 16:34
For your problem, `querySelectorAll` returns a list of elements, so we cannot get `textContent` of a single element on that list. You can check my answer for a better understanding too. @Shtarley — Nick Vu, Apr 26 '22 at 16:44

score 0 · Answer 1 · answered Apr 26 '22 at 16:30

querySelectorAll returns a list of elements, so you cannot check textContent of a particular element

I'd suggest that you should convert your list to an array with a spreading operation (to be able to use array functions) and then use some to check 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>

How can I check if a specific value exists in a list?

1 Answers1