Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by steven swensen
steven swensen
7,926 Points

I can not figure out these radio buttons

JavaScript

//Color Mixer x
let div24 = document.querySelector('div#pro24');
let color1 = document.forms('radio[name="firstColor"]');
let color2 = document.forms('radio[name="secoundColor"]');
if(color1[0].checked && color2[0].checked){
    div24.style.bakcgroundColor = "red";
}

HTML

            <div class="all" id="pro24"><!-- Color Mixer -->
                <h1>Color Mixer</h1>
                <form name="firstColor">
                    <p>First Color</p>
                    <input type="radio" name="firstColor" value="red1" checked> Red<br>
                    <input type="radio" name="firstColor" value="blue1"> Blue<br>
                    <input type="radio" name="firstColor" value="yellow1"> Yellow  
                </form>
                <form name="secoundColor">
                    <p>Secound Color</p>
                    <input type="radio" name="secoundColor" value="red2" checked> Red<br>
                    <input type="radio" name="secoundColor" value="blue2"> Blue<br>
                    <input type="radio" name="secoundColor" value="yellow2"> Yellow  
                </form>
            </div>

I am not sure how to call the radio button checked property.

4 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I spotted a few issues:

  • "document.forms" is a property, not a method — you probably meant to use "querySelector"
  • the tag name of a radio button is not "radio", the selector should use "input" instead
  • input elements can't be indexed, but you can get their "checked" property directly ("color1.checked")
  • without event handling, the code will only run once and clicking a button won't change anything
steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

hey everyone sorry i forgot to post This last night after messing with the console.log and a little research on the web i got this. JavaScript

//Color Mixer x
let div24 = document.querySelector('div#pro24');
let color1 = document.querySelector('form#firstColor');
color1.addEventListener('change', () => {
    if(color1[0].checked && color1[3].checked === true){
        div24.style.backgroundColor = "red";
        }
    else if(color1[1].checked && color1[4].checked === true){
        div24.style.backgroundColor = "blue";
        }
    else if(color1[2].checked && color1[5].checked === true){
        div24.style.backgroundColor = "yellow";
        }
    else if(color1[0].checked && color1[4].checked || color1[1].checked && color1[3].checked === true){
        div24.style.backgroundColor = "purple";
        }
    else if(color1[0].checked && color1[5].checked || color1[2].checked && color1[3].checked === true){
        div24.style.backgroundColor = "orange";
        }
    else if(color1[1].checked && color1[5].checked || color1[2].checked && color1[4].checked === true){
        div24.style.backgroundColor = "green";
        }
});

HTML

            <div class="all" id="pro24"><!-- Color Mixer -->
                <h1>Color Mixer</h1>
                <form id="firstColor">
                    <p>First Color</p>
                    <input type="radio" name="firstColor" value="red1"> Red<br>
                    <input type="radio" name="firstColor" value="blue1"> Blue<br>
                    <input type="radio" name="firstColor" value="yellow1"> Yellow
                    <p>Secound Color</p>
                    <input type="radio" name="secoundColor" value="red2"> Red<br>
                    <input type="radio" name="secoundColor" value="blue2"> Blue<br>
                    <input type="radio" name="secoundColor" value="yellow2"> Yellow  
                </form>
            </div>
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Looks like you got it fixed. :+1:

Bonus hint: Since id's must always be unique you don't need to combine tag names with them in selectors. For example, 'div#pro24' can be simplified to just '#pro24'.

steven swensen
steven swensen
7,926 Points
steven swensen
steven swensen
7,926 Points

Steve your hints always help you are like the JS master ha ha, and thanks for the clarification on the selector. less code is clean code.