Menu
When I use this code in the console:
document.querySelectorAll("a.pointer[title='Average']")
It returns a list of Averages, each of which displays text on the page:
<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>
How would I go about changing the text of all of these to "0"? I've already tried:
document.querySelectorAll("a.pointer[title='Average']").textContent = "0";
document.querySelectorAll("a.pointer[title='Average']").innerHTML = "0";
document.querySelectorAll("a.pointer[title='Average']").text = "0";
257
Differences Between an HTML Collection and a NodeList An HTML Collection does not have access to array methods, despite it looking like an array. A NodeList has access to the forEach array method, which is useful when you want to iterate through the nodes.
childNodes and methods such as document. querySelectorAll() . Note: Although NodeList is not an Array , it is possible to iterate over it with forEach() . It can also be converted to a real Array using Array.
NodeList items can only be accessed by their index number. An HTMLCollection is always a live collection. Example: If you add a <li> element to a list in the DOM, the list in the HTMLCollection will also change. A NodeList is most often a static collection.
The document. querySelectorAll() returns a static NodeList. That means that it doesn't change, even if the UI does.
You have to use loop for this purpose, for example using for loop :
var links = document.querySelectorAll("a.pointer[title='Average']");
for (var i=0; i < links.length; i++) {
links[i].innerHTML = '0';
}<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a><br>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a><br>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>But since your using jQuery that could be simply like :
$("a.pointer[title='Average']").text('0');
Hope this helps.
$("a.pointer[title='Average']").text('0');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<br>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<br>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>document.querySelectorAll returns a nodelist, not just a single object. Just iterate through each one and set the properties on each object:
var objects = document.querySelectorAll("a.pointer[title='Average']");
for (var i in objects) {
object[i].innerHTML = "0";
}
Get the total length of the <a class="pointer" title="Average" onclick="showScoretab(this)"> and do a for loop, and inside the loop, that's where you set the innerHTML of the elements into 0
var pointers = document.querySelectorAll("a.pointer[title='Average']");
for(var i = 0; i < pointers.length; i++){
pointers[i].innerHTML = "0";
}<a class="pointer" title="Average" onclick="showScoretab(this)">421.95</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">225.02</a>
<a class="pointer" title="Average" onclick="showScoretab(this)">292.51</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
