I'm stuck! Help!

HTML-CSS
1

Tell us what’s happening: I don’t understand why this is not correct. I nested my radio buttons in their own label as instructed but the program is recognizing it. What am I doing wrong?

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>   
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor">
<label for="outdoor">Outdoor</label>
</label>

<button type="submit">Submit</button>  
 </form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:75.0) Gecko/20100101 Firefox/75.0.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

3

you nested label and input inside an other label

instead you need the input nested in its own label, without a second label nested in the first label

4

It’s great that you are enthusiastic about helping others, but we prefer to help people fix their code rather than just giving them the solution.

5

@sazarzycki

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

6

@muhammadherman, your nesting isn’t quite right.

Compare the given example

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

with your code

<label>   
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
</label>

You have some extra label tags in here and you didn’t nets your radio button inside the label with the for="indoor" attribute like was shown in the example.

7

Thanks Jeremy, I tried that and it still keeps telling me that “each of my two radio button elements should be nested in it’s own element.” All of the other 6 tests are completed…

8

What is your new code?

9

Look at the code below. It is what is required . Compare with yours.

<label for="indoor">Indoor
   <input id="indoor" type="radio" name="indoor-outdoor">
</label>

<label for="outdoor">Outdoor
  <input id="outdoor" type="radio" name="indoor-outdoor">
</label>

It is not correct to do this

<label>   
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor">
<label for="outdoor">Outdoor</label>
</label>
10

Whew! I found my mistake. I had my input before my label, switched them around and now I’m good. Thanks everyone!!!

1 Like