+ 1

code not working??

<div id="test"> <p style="color: red; font-size: 200px;">Sample</p> <p style="color: red; font-size: 200px;">Sample2</p> </div> var arr = document.getElementById("test"); var c = arr.childNodes; for(var x = 0; x < c.length; x++) { c[x].style.color = "grey""; }

23rd Dec 2017, 7:44 AM
Mohamed Kalith
Mohamed Kalith - avatar
14 Answers
+ 7
https://code.sololearn.com/W6cA8Me8XcGk/?ref=app it can works even without "onload" method
23rd Dec 2017, 8:28 AM
Botol
Botol - avatar
+ 6
inattention generates problems😌
23rd Dec 2017, 8:16 AM
Botol
Botol - avatar
+ 6
@Naveen inattention(2.0) â˜ș
23rd Dec 2017, 8:40 AM
Botol
Botol - avatar
+ 5
Yeah basically there are 3 issues with the code. 1.) The DOM may not have been created prior to attempting to access its elements 'test', hence the onload function or placing in a script at the bottom of the body etc. 2.) The use of childNodes here instead of children resulting in undefined being returned. 3.) The syntax error of the additional double quote.
23rd Dec 2017, 8:47 AM
ChaoticDawg
ChaoticDawg - avatar
+ 5
@Mohammed we cannot change elements with childnodes property, it is used only for reading elements, not changing them
23rd Dec 2017, 9:21 AM
Botol
Botol - avatar
+ 4
window.onload = function() { var arr = document.getElementById("test"); var c = arr.children; // Use children instead of childNodes for(var x = 0; x < c.length; x++) { c[x].style.color = "grey"; // You also had an extra quote here } };
23rd Dec 2017, 8:27 AM
ChaoticDawg
ChaoticDawg - avatar
+ 3
What about the " mistake! in c[x].style.color = "grey"";
23rd Dec 2017, 8:38 AM
Naveen Maurya
Naveen Maurya - avatar
+ 3
@01ejka Yeah!
23rd Dec 2017, 8:41 AM
Naveen Maurya
Naveen Maurya - avatar
+ 2
LOL Ooops sorry forgot to change childNodes to children! Then it should work. Code edited.
23rd Dec 2017, 8:27 AM
ChaoticDawg
ChaoticDawg - avatar
+ 2
@01ejka To further prove what I am saying please view the code below @Mohamed Kalith This may better answer your question. It's not that you aren't getting the P elements, but that they are not accessible in the way you are attempting due to the use of childNodes vs children which results in an error. childNodes will return a list (array) of ALL of the nodes that are a child of the object while children will return a list (array) of all of the elements that are a child of the object. window.onload = function() { var arr = document.getElementById("test"); var a = arr.childNodes; alert(a[0].nodeName); alert(a[0].parentElement); // 'test' a[0].nodeValue = "HELLO"; // ^^ this is inserted like so: // <div id="test">"HELLO"<p style="color: red; font-size: 200px;">Sample</p> var c = arr.children; alert(c[0].nodeName); alert(a[1].nodeName); // This is equal to the above line a[1].style.color = "grey"; // You should also not the difference in the length property alert(a.length); // VS alert(c.length); for(var x = 0; x < a.length; x++) { a[x].style.color = "grey"; // Trying to change a non-existent property on an text node object alert("is this output?... NOPE"); // Because of above error this code is never reached // a[1] which is one of the objects you're after is never reached so its color isn't changed } };
23rd Dec 2017, 10:21 AM
ChaoticDawg
ChaoticDawg - avatar
+ 1
@ChaoticDawg still not working??
23rd Dec 2017, 8:16 AM
Mohamed Kalith
Mohamed Kalith - avatar
+ 1
@ChaoticDawg why childNodes not working in this case?
23rd Dec 2017, 9:17 AM
Mohamed Kalith
Mohamed Kalith - avatar
+ 1
@01ejka I don't believe that is an accurate statement. childNodes returns a list of nodes. An element is also a node. Properties and attributes etc can be changed from the returned list of nodes by accessing the lists individual elements. The similarities and differences between children and childNodes can be quite confusing and I often need to test my code to find which one to use. So I would advise you do some research on the 2 and when writing your code be prepared to test for both use cases. In this case childNodes[0] will return the first #text node while children[0] will return the first P element. Try running the code below to see the difference between the node names. window.onload = function() { var arr = document.getElementById("test"); var a = arr.childNodes; alert(a[0].nodeName); var c = arr.children; alert(c[0].nodeName); };
23rd Dec 2017, 9:43 AM
ChaoticDawg
ChaoticDawg - avatar
+ 1
Ahmed Raza Chandio Answer True
5th Mar 2022, 11:54 AM
Ahmed Raza
Ahmed Raza - avatar