无法更改背景颜色

Question

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

}
}

Answer 1

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:

• Generate the grid with JS, instead of hard-coding all of those table cells.
• Use JS event listeners for the cells, instead of repeating 'onclick' over and over.
• Your table grid should be using tr's and td's, not th. TH's are intended for a header row. You're just lucky the table works anyhow. In any case, there's probably a better way to render the grid using div's and flexbox, maybe.
• All of your colors should be kept in an array, and using that generate a color 'toolbar'.