javascript - 无法更改背景颜色

Question

我有一个单选按钮，我想根据

用户在 javascript 中选择的颜色，但 checkCUST radio 保留

透明。我建议去检查网站以更好地理解: https://pixelit--noobcode.repl.co/ https://repl.it/@NoobCode/PixelIT自己试了一下，没找到

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

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

您的问题本来可以措辞更好，并且您的代码需要更简洁，但是...

对于这个特定问题，您没有在用户提交自定义十六进制值后设置元素颜色，而是需要将其应用于单选按钮的父元素。

移动这条线...

checkCUST.style.backgroundColor = colors;

... 到这个函数的末尾，然后添加 parentNode，如下所示:

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

}

对您的代码进行一些改进，也许您正在为此努力:

• 使用 JS 生成网格，而不是对所有这些表格单元格进行硬编码。
• 为单元格使用 JS 事件监听器，而不是一遍又一遍地重复“onclick”。
• 您的表格网格应该使用 tr 和 td，而不是 th。 TH 用于标题行。你很幸运，这张 table 无论如何都能用。无论如何，也许有更好的方法来使用 div 和 flexbox 呈现网格。
• 你所有的颜色都应该保存在一个数组中，并使用它生成一个颜色“工具栏”。