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>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>