code not working??

Question

<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"";
}

Answer 1

https://code.sololearn.com/W6cA8Me8XcGk/?ref=app
it can works even without "onload" method

Answer 2

inattention generates problems😌

Answer 3

@Naveen inattention(2.0) ☺

Answer 4

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.

Answer 5

@Mohammed we cannot change elements with childnodes property, it is used only for reading elements, not changing them

Answer 6

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

Answer 7

What about the " mistake! in c[x].style.color = "grey"";

Answer 8

@01ejka Yeah!

Answer 9

LOL Ooops sorry forgot to change childNodes to children! Then it should work. Code edited.

Answer 10

@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
}
};

Answer 11

@ChaoticDawg still not working??

Answer 12

@ChaoticDawg why childNodes not working in this case?

Answer 13

@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);
};

Answer 14

Ahmed Raza Chandio
Answer
True