Javascript changing the color of text on a button based on user inputs

Question

I am supposed to create a HTML document with JavaScript that has 3 input (color level) boxes: Red, Green and Blue. It also is supposed to have a input button. The user will insert hex for each color level box 00 through FF. Once the user has enter the 3 sets of numbers, they click on the input button and it is supposed to change the color of the text on the button to the hex coded color they created.

No matter what I try I can get the input boxes on the HTML page, and enter the 2 digits into all three boxes, but the color of the text on the button does nothing. Other than I click the button, nothing happens.

 function AddColors() { document.getElementById("tColor").style.color = "#,tColor"; document.getElementById('tFirstNumber').value + document.getElementById('tSecondNumber').value + document.getElementById('tThirdNumber').value; } 

 <p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p> <p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p> <p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p> <p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p> <p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p> <input type="button" value="Click here to see the color you created" id="tColor" onclick="AddColors()" /> 

Answer 1

Your issues were:

• You didn't set a tColor variable
• You didn't concatenate the values to the # properly in "#,tColor"
• You need to set the value on the element after you get the values from your inputs, and you were doing it the other way around
• You duplicated an ID in your HTML and IDs must be unique

 function AddColors() { tColor = document.getElementById('tFirstNumber').value + document.getElementById('tSecondNumber').value + document.getElementById('tThirdNumber').value; console.log(tColor) document.getElementById("tColor").style.color = "#" +tColor; } 

 <p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p> <p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p> <p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p> <p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p> <p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p> <p id="tColor">your color</p> <input type="button" value="Click here to see the color you created" id="tColor" onclick="AddColors()" /> 

Answer 2

• Your code has two id s, an id has to be unique on the whole page

• Your didn't set a variable to hold your input's values

• You got confused about using strings and variables together

• You tried to apply the CSS on the element before you got the values to do so, so your script tried to apply a modifaction it didn't even know about yet

 function AddColors() { var color = document.getElementById('tFirstNumber').value + document.getElementById('tSecondNumber').value + document.getElementById('tThirdNumber').value; document.getElementById("tColor").style.color = "#" + color; } 

 <p>Enter two-digit, hexadecimal numbers for the amounts of red, green, and blue light you want </ br> combined to create a color.</p> <p {style text-align: center;}>Enter the hexadecimal numbers in the boxes below.</p> <p> Amount of <span style="color:#ff0000;">RED</span>: <input id="tFirstNumber" type="text"></p> <p> Amount of <span style="color:#00ff00;">GREEN</span>: <input id="tSecondNumber" type="text"></p> <p> Amount of <span style="color:#0000ff;">BLUE</span>: <input id="tThirdNumber" type="text"></p> <p id="tColor">I'll change my color!</p> <p id="tFirstNumber"></p> <input type="button" value="Click here to see the color you created" onclick="AddColors()" />