Fatal编程技术网
  • javascript/
  • Javascript 无法将复选框属性应用于for循环

Javascript 无法将复选框属性应用于for循环

javascript for-loop if-statement

Javascript 无法将复选框属性应用于for循环,javascript,for-loop,if-statement,Javascript,For Loop,If Statement,好吧，我希望我错过了一些简单的事情。基本上，我正在制作一个待办事项列表，我希望每个列表项都显示一个复选框。当用户单击该复选框时，textDecoration=line-through应该遍历listItem类。这意味着一行代码贯穿了人员创建的待办事项任务。以下是我主要使用的代码： function show() { var todos = get_todos(); var html = '<ul>'; for(var i=0; i < todos.length; i++) {

好吧，我希望我错过了一些简单的事情。基本上，我正在制作一个待办事项列表，我希望每个列表项都显示一个复选框。当用户单击该复选框时，textDecoration=line-through应该遍历listItem类。这意味着一行代码贯穿了人员创建的待办事项任务。以下是我主要使用的代码：

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';

document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
};

////////////////////////////////////
//Everything above here works. Below is the checkbox issue

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}
我现在的情况是，如果我在原始复选框中创建一个onClick函数，我就可以使用if/else语句，它可以正常工作。如果我使用document.getElementsByClassName设置checkBox/listItems变量，它将不起作用，但是如果我使用document.getElementById，它将起作用。问题是，它只在用户创建的第一个任务上工作，而在用户创建之后，其他任务都不工作。我假设这是因为ID只对一个元素起作用，而不像类对多个元素起作用，或者是因为它不像上面的代码那样在for循环中循环

TL/DR基本上当我运行上面的代码时，我一直得到未捕获的TypeError：无法设置未定义的属性“textDecoration” 在今天的节目中。js:57 在todo.js:75

当我为复选框创建一个单独的函数并使用elementbyid而不是elementsbyclass来更改上面html部分的id/类时，我不会出现这个错误

我真的很想让这些效果在所有任务中都能发挥作用，而不仅仅是第一个任务。非常感谢您的任何想法。谢谢大家

功能表演{ var todos=获取todos； var html=； 对于变量i=0；i} 我认为问题在于checkBox是一个类似数组的对象。我想您知道，当您编写代码时，您查看了checkBox.length，但是您没有索引到数组中

你有：

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}
为了清楚起见，我在需要的地方对名称进行了多元化，并添加了索引引用：

var checkBoxes = document.getElementsByClassName("checkBox");
var listItems = document.getElementsByClassName("listItem");

for (var i=0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked == true){
        listItems[i].style.textDecoration = "line-through";
    }else {
        listItems[i].style.textDecoration = "none";
    }
};}
如果可能的话，我会用css而不是javascript来实现这一点，这通常是我的规则。在这种情况下，您必须对标记进行一个小的更改：因为没有以前的同级选择器，所以您必须将输入放在相应的lis之前，但是因为lis是浮动的：left，所以它仍然呈现完全相同的结果

输入：选中+li{ 文字装饰：线条贯通； } 福 酒吧 巴兹
您必须使用复选框[i]并找到合适的列表项[i]来设置textDecoration，目前您正在检查整个列表checkBoxlistItem是元素的集合，样式不是元素集合的属性，因此样式未定义，这就是为什么您不能在其上设置textDecoration。您必须迭代每个listItem元素才能以这种方式设置属性。当我沿着var checkBoxes=document.getElementsByClassNamecheckBox的行尝试一些东西时，这同样适用于checkBox这是一个集合；var listItems=document.getElementsByClassNamelistItem；对于var i=0；i