无法改变背景颜色

时间：2018-03-21 23:32:55

标签： javascript html css

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

更改背景颜色

用户在javascript中选择的颜色，但checkCUST无线电停留

透明的。我建议去检查网站以便更好地理解： 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"; 

}
}

1 个答案:

答案 0 :(得分：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事件侦听器，而不是重复＆＃39; onclick＆＃39;一遍又一遍。
  • 您的表格应该使用tr和＃t，而不是th。 TH用于标题行。无论如何，你很幸运。无论如何，可能有更好的方法使用div和flexbox渲染网格。
  • 您应将所有颜色保存在一个数组中，然后使用它生成颜色工具栏＆＃39;。
相关问题
最新问题