"Cannot read properties of undefined (reading 'checked')" 仅在 1 个特殊盒子中发生错误

Question

var all = 0;
var x;
function check(a) {
x = a;
// console.log(x);
var z = document.getElementsByClassName('cb')[x - 1];
if (x == 1 || x == 10 || x == 91 || x == 100) {
if (z.checked) {
all++;
console.log(all);
} else {
all--;
console.log(all);
}
}
row();
}
function row() {
// console.log(x);
var z = document.getElementsByClassName('cb')[x - 1];
// console.log(z);
if (x >= 1 && x <= 10) {
if (z.checked) {
for (var i = x - 1; i <= 100;) {
var j = document.getElementsByClassName('cb')[i];
if (j.checked == false) {
console.log(!j.checked);
j.checked = true;
if (i == 0 || i == 9 || i == 90 || i == 99) {
console.log(i);
all++;
}
}
i = i + 10;
}
} else {
for (var i = x - 1; i <= 100;) {
var j = document.getElementsByClassName('cb')[i];
if (j.checked) {
document.getElementsByClassName('cb')[i].checked = false;
if (i == 0 || i == 9 || i == 90 || i == 99) {
all--;
}
}
i = i + 10;
}
}
}
console.log(all);
full();
}
function full() {
if (all == 4) {
// console.log('con true');
for (var i = 0; i <= 99; i++) {
// console.log('loop true');
var y = document.getElementsByClassName('cb')[i];
if (!y.checked) {
// console.log('con true');
document.getElementsByClassName('cb')[i].checked = true;
}
}
all = 0;
}
if (all == (-1)) {
// console.log('con true');
for (var i = 0; i <= 99; i++) {
// console.log('loop true');
var y = document.getElementsByClassName('cb')[i];
document.getElementsByClassName('cb')[i].checked = false;
}
all = 0;
}
}

<div class="container">
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(1);" name="">
<input type="checkbox" class="cb" onchange="check(2);" name="">
<input type="checkbox" class="cb" onchange="check(3);" name="">
<input type="checkbox" class="cb" onchange="check(4);" name="">
<input type="checkbox" class="cb" onchange="check(5);" name="">
<input type="checkbox" class="cb" onchange="check(6);" name="">
<input type="checkbox" class="cb" onchange="check(7);" name="">
<input type="checkbox" class="cb" onchange="check(8);" name="">
<input type="checkbox" class="cb" onchange="check(9);" name="">
<input type="checkbox" class="cb" onchange="check(10);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(11);" name="">
<input type="checkbox" class="cb" onchange="check(12);" name="">
<input type="checkbox" class="cb" onchange="check(13);" name="">
<input type="checkbox" class="cb" onchange="check(14);" name="">
<input type="checkbox" class="cb" onchange="check(15);" name="">
<input type="checkbox" class="cb" onchange="check(16);" name="">
<input type="checkbox" class="cb" onchange="check(17);" name="">
<input type="checkbox" class="cb" onchange="check(18);" name="">
<input type="checkbox" class="cb" onchange="check(19);" name="">
<input type="checkbox" class="cb" onchange="check(20);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(21);" name="">
<input type="checkbox" class="cb" onchange="check(22);" name="">
<input type="checkbox" class="cb" onchange="check(23);" name="">
<input type="checkbox" class="cb" onchange="check(24);" name="">
<input type="checkbox" class="cb" onchange="check(25);" name="">
<input type="checkbox" class="cb" onchange="check(26);" name="">
<input type="checkbox" class="cb" onchange="check(27);" name="">
<input type="checkbox" class="cb" onchange="check(28);" name="">
<input type="checkbox" class="cb" onchange="check(29);" name="">
<input type="checkbox" class="cb" onchange="check(30);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(31);" name="">
<input type="checkbox" class="cb" onchange="check(32);" name="">
<input type="checkbox" class="cb" onchange="check(33);" name="">
<input type="checkbox" class="cb" onchange="check(34);" name="">
<input type="checkbox" class="cb" onchange="check(35);" name="">
<input type="checkbox" class="cb" onchange="check(36);" name="">
<input type="checkbox" class="cb" onchange="check(37);" name="">
<input type="checkbox" class="cb" onchange="check(38);" name="">
<input type="checkbox" class="cb" onchange="check(39);" name="">
<input type="checkbox" class="cb" onchange="check(40);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(41);" name="">
<input type="checkbox" class="cb" onchange="check(42);" name="">
<input type="checkbox" class="cb" onchange="check(43);" name="">
<input type="checkbox" class="cb" onchange="check(44);" name="">
<input type="checkbox" class="cb" onchange="check(45);" name="">
<input type="checkbox" class="cb" onchange="check(46);" name="">
<input type="checkbox" class="cb" onchange="check(47);" name="">
<input type="checkbox" class="cb" onchange="check(48);" name="">
<input type="checkbox" class="cb" onchange="check(49);" name="">
<input type="checkbox" class="cb" onchange="check(50);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(51);" name="">
<input type="checkbox" class="cb" onchange="check(52);" name="">
<input type="checkbox" class="cb" onchange="check(53);" name="">
<input type="checkbox" class="cb" onchange="check(54);" name="">
<input type="checkbox" class="cb" onchange="check(55);" name="">
<input type="checkbox" class="cb" onchange="check(56);" name="">
<input type="checkbox" class="cb" onchange="check(57);" name="">
<input type="checkbox" class="cb" onchange="check(58);" name="">
<input type="checkbox" class="cb" onchange="check(59);" name="">
<input type="checkbox" class="cb" onchange="check(60);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(61);" name="">
<input type="checkbox" class="cb" onchange="check(62);" name="">
<input type="checkbox" class="cb" onchange="check(63);" name="">
<input type="checkbox" class="cb" onchange="check(64);" name="">
<input type="checkbox" class="cb" onchange="check(65);" name="">
<input type="checkbox" class="cb" onchange="check(66);" name="">
<input type="checkbox" class="cb" onchange="check(67);" name="">
<input type="checkbox" class="cb" onchange="check(68);" name="">
<input type="checkbox" class="cb" onchange="check(69);" name="">
<input type="checkbox" class="cb" onchange="check(70);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(71);" name="">
<input type="checkbox" class="cb" onchange="check(72);" name="">
<input type="checkbox" class="cb" onchange="check(73);" name="">
<input type="checkbox" class="cb" onchange="check(74);" name="">
<input type="checkbox" class="cb" onchange="check(75);" name="">
<input type="checkbox" class="cb" onchange="check(76);" name="">
<input type="checkbox" class="cb" onchange="check(77);" name="">
<input type="checkbox" class="cb" onchange="check(78);" name="">
<input type="checkbox" class="cb" onchange="check(79);" name="">
<input type="checkbox" class="cb" onchange="check(80);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(81);" name="">
<input type="checkbox" class="cb" onchange="check(82);" name="">
<input type="checkbox" class="cb" onchange="check(83);" name="">
<input type="checkbox" class="cb" onchange="check(84);" name="">
<input type="checkbox" class="cb" onchange="check(85);" name="">
<input type="checkbox" class="cb" onchange="check(86);" name="">
<input type="checkbox" class="cb" onchange="check(87);" name="">
<input type="checkbox" class="cb" onchange="check(88);" name="">
<input type="checkbox" class="cb" onchange="check(89);" name="">
<input type="checkbox" class="cb" onchange="check(90);" name="">
</div>
<div class="flex align around">
<input type="checkbox" class="cb" onchange="check(91);" name="">
<input type="checkbox" class="cb" onchange="check(92);" name="">
<input type="checkbox" class="cb" onchange="check(93);" name="">
<input type="checkbox" class="cb" onchange="check(94);" name="">
<input type="checkbox" class="cb" onchange="check(95);" name="">
<input type="checkbox" class="cb" onchange="check(96);" name="">
<input type="checkbox" class="cb" onchange="check(97);" name="">
<input type="checkbox" class="cb" onchange="check(98);" name="">
<input type="checkbox" class="cb" onchange="check(99);" name="">
<input type="checkbox" class="cb" onchange="check(100);" name="">
</div>
</div>

//错误

Task-8.html:43未捕获类型错误：无法读取未定义的属性(读取"checked")第行(任务-8.html:43:13)检查(任务-8.html:29:4)在HTMLInputElement.onchange(任务-8.html:110:66)

//说明此错误仅出现在第一个框中。其他一切都很好。任务是在选中所有4个角时选中所有框，如果未选中任何1个角，则取消选中所有框。此外，如果选中1到10个框中的任何一个，则包含该框的列将被选中，如果我们再次取消选中该框，则取消选中。

代码pg-1

代码pg-2

代码pg-3

ERRORE pg

Answer 1

代码一开始有点混乱(我不知道我是否在让自己理解)
我很好奇，所以经过一些测试，错误似乎在row function的for中。

在您为每个循环评估的条件下：

// ❌ `i` should never be equal to 100, since we don't have 101 elements
for (var i = x - 1; i <= 100;) {
i = i + 10
}
// ✅ `i` will always be in the range 0 - 99, which is adequate for our 100 elements
for (let i = x - 1; i < 100; i += 10) {}

这解决了控制台中显示的错误(与您的问题相关)，并保持了检查所有输入的逻辑——如果检查了所有4个角，则未测试任何其他预期逻辑。