What the heck?!?!?!? create a set from radio buttons

Tell us what’s happening:
I watched the video on where to place the radio buttons and coded it exactly word for word and the radio buttons appeared next to the submit button instead of above. so i moved the code around and got the ‘indoor’ ‘outdoor’ buttons above the submit button and both ways say its wrong even though when i did it the second way it appeared exactly correct with the buttons above the submit button. The code shown is exactly how the video tells you to do it in the spoiler.

Your code so far

  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="/submit-cat-photo">
  <input id='indoor' type='radio' name='indoor-outdoor'>
  <label for='indoor'>indoor</label>
  <input id='outdoor' type='radio' name='indoor-outdoor'>
  <label for='outdoor'>outdoor</label>

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

<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">
<input id='indoor' type='radio' name='indoor-outdoor'>
<label for='indoor'>indoor</label>
<input id='outdoor' type='radio' name='indoor-outdoor'>
<label for='outdoor'>outdoor</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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36 Edg/85.0.564.51.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

Hello! welcome to the forum :grin: i tried using your code and it seems like the error is that your radio buttons need to be nested in their own label, you have this:

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

But it should be like this:

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

Changing this should make you code work, keep up the good work :grin:

3 Likes

Thank Yooooou so much , I had the same issue, and your answer finally made me pass the challenge : )))))

1 Like

I’m glad i could help :grin:

1 Like

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.