Question

0

353

Views

How fix Error: expected false to equal true html

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?

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T06:21:00.225Z

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>

Answer 2 · 2022-07-11T06:21:00.232Z

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>

0

353

How fix Error: expected false to equal true html

2 answers

0

0

Find remote jobs

Andres GPT