How fix Error: expected false to equal true html

user_16921147 0
Viewed 86

I am learning the basics of HTML. I have the following code:

alert(document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length > 0)
<div>
    <label>Name</label><br/>
    <input type="text"><br/>
    <label>Password</label><br/>
    <input type="password">
</div>
<div>
    <input name="gender " type="radio">
    <label>Male</label>
    <input name="gender " type="radio">
    <label>Female</label>
    <input name="gender " type="radio">
    <label>Others</label>
</div>
<div>
    <input name="answer" type="checkbox">
    <label>Answer 1</label>
    <input name="answer" type="checkbox">
    <label>Answer 2</label>
    <input name="answer" type="checkbox">
    <label>Answer 3</label>
    <input name="answer" type="checkbox">
    <label>Answer 4</label>
</div>
<div>
    <input type="submit" value="Submit">
</div>

I expected the result to be true, since the first element of the first <div> is a <label>, which contains a string of non-zero length. The actual result is false, however. Why?

html javascript
2 Answers

You are using childNodes, which retrieves all children, including text:

childNodes includes all child nodes—including non-element nodes like text and comment nodes. To get a collection of only elements, use Element.children instead.

Thus, document.querySelector('div:nth-child(1)').childNodes[0] gives you the text that is between the <div> and the <label>, which stripped has no length. Instead, you should use children, which gets the child elements.

For example:

alert(document.querySelector('div:nth-child(1)').children[0].textContent.trim().length>0)
<div>
    <label>Name</label><br/>
    <input type="text"><br/>
    <label>Password</label><br/>
    <input type="password">
</div>
<div>
    <input name="gender " type="radio">
    <label>Male</label>
    <input name="gender " type="radio">
    <label>Female</label>
    <input name="gender " type="radio">
    <label>Others</label>
</div>
<div>
    <input name="answer" type="checkbox">
    <label>Answer 1</label>
    <input name="answer" type="checkbox">
    <label>Answer 2</label>
    <input name="answer" type="checkbox">
    <label>Answer 3</label>
    <input name="answer" type="checkbox">
    <label>Answer 4</label>
</div>
<div>
    <input type="submit" value="Submit">
</div>

user_47139520

When I used your code it seems that the spaces between <div> and <label>Name</label><br/> counts as text. Because of this document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length>0 checks the length of the space. Try and remove the spaces in the HTML and the error should disappear.

var foo = document.querySelector('div:nth-child(1)').childNodes[0].textContent.trim().length > 0;
var bar= document.querySelector('div:nth-child(1)').childNodes[0];

console.log(foo);
console.log(bar);
<div><label>Name</label><br/><input type="text"><br/><label>Password</label><br/><input type="password"></div>
<div>
    <input name="gender " type="radio">
    <label>Male</label>
    <input name="gender " type="radio">
    <label>Female</label>
    <input name="gender " type="radio">
    <label>Others</label>
</div>
<div>
    <input name="answer" type="checkbox">
    <label>Answer 1</label>
    <input name="answer" type="checkbox">
    <label>Answer 2</label>
    <input name="answer" type="checkbox">
    <label>Answer 3</label>
    <input name="answer" type="checkbox">
    <label>Answer 4</label>
</div>
<div>
    <input type="submit" value="Submit">
</div>

user_78257380
Related