个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已将复选框分配给颜色。昨天我添加了 8 种颜色，今天早上又添加了 2 种。我复制了其他颜色的代码，我只是更改了值以将其分配给好的颜色。我的问题是，对于粉色和橙色，我收到错误消息 TypeError: Cannot read property 'checked' of null 在 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 之后
<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");
}
}
最佳答案
如果你检查你的 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">
一切都应该工作正常
关于javascript - 选中复选框问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49349308/
25
4
0
我是一名优秀的程序员,十分优秀！