I have a radio button and I wanna change the back ground color depending of the
color chosed by the user in the javascript, but the checkCUST radio stay
transparent. I suggest to go check the site to understand better : https://pixelit--noobcode.repl.co/ https://repl.it/@NoobCode/PixelIT I tried to find out by myself, but couldn't find
<th id="th" class="erase"><input type="radio" id="ERA" name="colo" /><label
for="ERA"></label></th>
<th id="th" class="black"> <input type="radio" id="BLACK" name="colo" /><label for="BLACK"></label></th>
<th id="th" class="purple"><input type="radio" id="PURPLE" name="colo" /><label for="PURPLE"></label></th>
<th id="th" class="blue"><input type="radio" id="BLUE" name="colo" /><label for="BLUE"></label></th>
<th id="th" class="green"><input type="radio" id="GREEN" name="colo" /><label for="GREEN"></label></th>
<th id="th" class="yellow"><input type="radio" id="YELLOW" name="colo" /><label for="YELLOW"></label></th>
<th id="th" class="orange"><input type="radio" id="ORANGE" name="colo" /><label for="ORANGE"></label></th>
<th id="th" class="red"><input type="radio" id="RED" name="colo" /><label for="RED"></label></th>
<th id="th" class="pink"><input type="radio" id="PINK" name="colo" /><label for="PINK"></label></th>
<th id="th" class="brown"><input type="radio" id="BROWN" name="colo" /><label for="BROWN"></label></th>
<th id="th" class="custom"><input type="radio" id="OK" name="colo"/><label for="OK"></label></th>
<th class="rainbow" onclick="hexa()"></th>
</tr>
</table>
<table class="td">
<tr>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
<th onclick="myFunc(this)"></th>
</tr>
</table>
The Javascript
var colors;
var checkCUST;
var checkBLACK = document.getElementById("BLACK");
var checkBLUE = document.getElementById("BLUE");
var checkRED= document.getElementById("RED");
var checkYELLOW = document.getElementById("YELLOW");
var checkGREEN = document.getElementById("GREEN");
var checkPURPLE = document.getElementById("PURPLE");
var checkBROWN = document.getElementById("BROWN");
var checkPINK = document.getElementById("PINK");
var checkORANGE = document.getElementById("ORANGE");
var checkERA = document.getElementById("ERA");
checkCUST = document.getElementById("OK");
var custom = document.getElementsByClassName("custom");
function hexa(){
colors = window.prompt("Enter Hex Value");
}
checkCUST.style.backgroundColor = colors;
function myFunc(elem) {
if (checkBLUE.checked == true){
elem.style.backgroundColor = "royalblue";
}
else if(checkBLACK.checked == true){
elem.style.backgroundColor = "#000000";
}
else if(checkGREEN.checked == true){
elem.style.backgroundColor = "#11c61d";
}
else if(checkYELLOW.checked == true){
elem.style.backgroundColor = "yellow";
}
else if(checkRED.checked == true){
elem.style.backgroundColor = "red";
}
else if(checkPURPLE.checked == true){
elem.style.backgroundColor = "#6c0f8e";
}
else if(checkBROWN.checked == true){
elem.style.backgroundColor = "#8e4d0f";
}
else if(checkORANGE.checked == true){
elem.style.backgroundColor = "#ff8c00";
}
else if(checkPINK.checked == true){
elem.style.backgroundColor = "hotpink";
}
else if(checkCUST.checked == true){
elem.style.backgroundColor = colors;
}
else if(checkERA.checked == true){
elem.style.backgroundColor = "transparent";
}
}
Your question could have been worded better, and your code needs to be cleaner, however...
For this particular issue, you aren't setting the element color after the user submits their custom hex value, and you need to apply it to the parent element of the radio button.
Move this line...
checkCUST.style.backgroundColor = colors;
... to the end of this function, and add parentNode, like so:
function hexa(){
colors = window.prompt("Enter Hex Value");
// Check if colors isn't empty. Even better to confirm if it's actually a valid hex color.
if (colors != null) {
// Apply the new custom hex value to the element
checkCUST.parentNode.style.backgroundColor = colors;
}
}
Some improvements to your code, perhaps you're working towards this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.