试图获取span元素的内部文本内容

Question

I'm trying to create a search bar that will allow the user to search an array of items. I'm using a span element as my filter, but for some reason, I can't get the contents of the element to assign to a variable.

It's a pretty straight forward setup.

I grab the contents of the class wrapping the list, then grab each span element. For sanity reasons I console.log the span elements to ensure they are captured (which, they are).

I then attempt to grab the text contents within and assign it to a txtValue variable which I would then proceed to do a comparison check with the filter.

The part where I assign it to a text value is where the bug occurs, it doesn't seem to grab the inner text. Perhaps I'm going about this wrong?

 function search() { var input, filter, e, content, txtValue; input = document.getElementById("search"); filter = input.value.toUpperCase(); e = document.getElementById("search-list"); content = e.getElementsByTagName("span"); console.log(content); for (i = 0; i < content.length; i++) { if (content) { txtValue = content.innerHTML; console.log(textValue); if (txtValue.toUpperCase().indexOf(filter) > -1) { content[i].style.display = ""; } else { content[i].style.display = "none"; } } } } 

 <div class="search-bar"> <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers"> </div> <div id="search-list"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> 

Answer 1

• content is an nodelist and you need to access index to access node
• you defined variable as txtValue in console you're using textValue

 function search() { var input, filter, e, content, txtValue; input = document.getElementById("search"); filter = input.value.toUpperCase(); e = document.getElementById("search-list"); content = e.getElementsByTagName("span"); for (i = 0; i < content.length; i++) { if (content) { txtValue = content[i].innerHTML; if (txtValue.toUpperCase().indexOf(filter) > -1) { content[i].style.display = ""; } else { content[i].style.display = "none"; } } } } 

 <div class="search-bar"> <input type="text" id="search" onkeyup="search()"placeholder="Search for numbers"> </div> <div id="search-list"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> 

Answer 2

Maybe you need to use:

txtValue = content[i].innerHTML;