Question

我已将复选框指定为颜色。昨天我今天早上又增加了8种颜色和2种颜色。我复制了其他颜色的代码，我只是改变了值，将它分配给了好的颜色。我的问题是，对于粉红色和橙色我得到错误消息TypeError：无法读取属性'已检查'的null at myFunc（https://replit.org/data/web_hosting/NoobCode/Color/index.js:36:24）在HTMLTableCellElement.onclick（https://replit.org/data/web_hosting/NoobCode/Color/:238:36）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
Black<input type="checkbox" id="BLACK">
___Blue<input type="checkbox" id="BLUE">
___Red<input type="checkbox" id="RED">
___Yellow<input type="checkbox" id="YELLOW">
___Green<input type="checkbox" id="GREEN">
___Purple<input type="checkbox" id="PURPLE">
___Brown<input type="checkbox" id="BROWN">
___Pink<input type="checkbox" id="PINK">
___Orange<input type="checkbox" id="ORANGE">
___Erase<input type="checkbox" id="PINK">

在我有一张很多时间的桌子之后

<table >
        <tr>
    <th onclick="myFunc(this)"></th>
    <th onclick="myFunc(this)"></th>  
  </tr>
</table>

CSS

 td, th
{
   border:solid black 1px;     
   width:950px;
   height:26px;


}

table
{
     border-collapse: collapse;

}

.thBlack
{
background-color:Black;
}
.thBlue
{
    background-color:royalblue;
}
.thYellow
{
    background-color:yellow;
}
.thRed
{
    background-color:#f72213;
}
    .thGreen
{
    background-color:green;
}
    .thPurple
{
    background-color:purple;
}
.thBrown{
    background-color:#6b461a;
}
.thWhite{
    background-color:white;
}
.thOrange{
background-color:#ff8c00;
}
.thPink{
    background-color:hotpink;
}

的Javascript

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 checkWHITE = document.getElementById("WHITE");

function myFunc(elem) {
if (checkBLUE.checked == true){
elem.classList.toggle("thBlue");
}

else if(checkBLACK.checked == true){
         elem.classList.toggle("thBlack");
}
 else if(checkGREEN.checked == true){
         elem.classList.toggle("thGreen");
}

else if(checkYELLOW.checked == true){
         elem.classList.toggle("thYellow");
}
 else if(checkRED.checked == true){
         elem.classList.toggle("thRed");
}
 else if(checkPURPLE.checked == true){
         elem.classList.toggle("thPurple");
}
else if(checkBROWN.checked == true){
         elem.classList.toggle("thBrown");
}
else if(checkWHITE.checked == true){
         elem.classList.toggle("thWhite");
}
else if(checkORANGE.checked == true){
         elem.classList.toggle("thOrange");
}
else if(checkPINK.checked == true){
         elem.classList.toggle("thPink");
}
}

Answer 1

如果你检查你的repl错误，似乎错误在你的函数的第36行。这一行：

else if(checkWHITE.checked == true){

var checkWHITE定义为：

var checkWHITE = document.getElementById("WHITE");

但document.getElementById("WHITE");返回null

这种情况正在发生，因为您没有任何ID为WHITE的元素只有这些颜色：

Black<input type="checkbox" id="BLACK">
___Blue<input type="checkbox" id="BLUE">
___Red<input type="checkbox" id="RED">
___Yellow<input type="checkbox" id="YELLOW">
___Green<input type="checkbox" id="GREEN">
___Purple<input type="checkbox" id="PURPLE">
___Brown<input type="checkbox" id="BROWN">
___Pink<input type="checkbox" id="PINK">
___Orange<input type="checkbox" id="ORANGE">
___Erase<input type="checkbox" id="PINK">

所以，只需将其添加到您的html：

___White<input type="checkbox" id="ORANGE">

一切都应该可以正常工作

选中复选框问题

1 个答案: