Nested label problem

HTML-CSS
1

Tell us what’s happening:
the code looks perfect to me. please tell me what is wrong.
it is showing me the error:
Each of your three checkbox elements should be nested in its own label element.

(It think that i have already done what they are trying to say)

Your code so far


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="/submit-cat-photo">
  <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>

<label for="1">
<input id="1" type="checkbox" name="personality">1<br>
</label>


<label for="2">
<input id="2" type="checkbox" name="personality">2<br>
</label>


<label for="3">
<input id="3" type="checkbox" name="personality">3<br>
</label>


  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:74.0) Gecko/20100101 Firefox/74.0.

Challenge: Create a Set of Checkboxes

Link to the challenge:

2

Welcome!

Having the <br> element within the label is causing the tests to fail. If you really want them, add them after each closing label.

Hope this helps

2 Likes
3

hey! thank you!
My code is still showing error. Please guide me.

4

If you did what @Sky020 said to do it should pass.

We need to see your new code. To post code on the forum just click the </> button on the toolbar above the text box you type into. Then paste the code where it tells you to.

5

THANKS! I found my mistake and it passed. By the way, do you know the reason why I cannot put the {br} tag inside the label tag?

6

The test that is responsible for checking the code expects the code to have been written in a certain way in order to actually be able to test it. If it is not, then the test may fail.

In this case, the code responsible for checking the nesting breaks from the extra <br> element inside the label.

I don’t expect this to make much sense to you right now, but just for reference here is the test code.

text: Each of your three checkbox elements should be nested in its own <code>label</code> element.
testString: assert($('label > input[type="checkbox"]:only-child').length > 2);
1 Like