javascript - 为什么我的代码中未定义检查?'纯js'
问题描述
** 如果选中复选框以在 HTML 元素中添加过滤类但它不起作用并在此行中给我一个未定义的错误check.parentElement.classList.add("filtered") ; **
<ul class="ul-list"></ul>
</section>
</main>
<footer class="footer">
<button class="all footer-btn">All</button>
<button class="active footer-btn">Active</button>
<button class="complete footer-btn">Complete</button>
</footer>
let check = document.querySelectorAll(".complete-txt");
let complete_btn = document.querySelector(".complete");
let active_btn = document.querySelector(".active");
let all_btn = document.querySelector(".all");
let edit_list = document.querySelector(".edit-list");
let main_text = document.querySelector(".main-text");
let list_item = document.querySelector(".list-item");
let footer = document.querySelector(".footer");
const generateTemplate = (todo) => {
const html = `
<li class="list-item">
<input type="checkbox" class="complete-txt" name="" id="check"><span class="main-text">${todo}</span><div class="edit-list"></div><div class="delete-list"></div>
</li>
`;
list.innerHTML += html;
};
// add todos event
addForm.addEventListener("submit", (e) => {
e.preventDefault();
const todo = addForm.add.value.trim();
if (todo.length) {
generateTemplate(todo);
addForm.reset();
}
});
active_btn.addEventListener("click", function () {
let check_id = document.querySelector(".complete-txt");
// check.forEach(function () {
debugger;
if (check.checked !== "true") {
check.parentElement.classList.add("filtered");
console.log("hi");
}
// });
// console.log("hi");
console.log("hi");
// console.log(check.checked.value);
});
解决方案
如果较大的文档修复了所有其他不一致的地方,您应该能够将事件监听器更改为
active_btn.addEventListener("click", function () {
let check_id = document.querySelector(".complete-txt");
if (check_id.checked !== "true") {
check_id.parentElement.classList.add("filtered");
}
});
但!!!这不会“修复”您的所有错误,例如let check
在创建复选框之前定义generateTemplate
推荐阅读
- reactjs - Django 中的发布和“保存草稿”功能
- azure-devops - TestComplete 与 AzureDevops 的集成
- c++ - 使用 LuaBridge 从 Lua 迭代 C 数组类型的容器类
- tensorflow - LSTM 拟合错误:data[0].shape = [3] 不以 indices[0].shape = [2] 开头
- excel - 通过 Power Automate 过滤 Excel 并发送邮件
- amazon-web-services - 从 S3 VPC 终端节点安装 AWS Cloudwatch 代理
- python - 忽略 pylintrc 中的文件
- javascript - Javascript 库未在 window.open 选项卡上加载
- javascript - Storybook:如何更新我的 webpack 配置以显示原始源映射?
- angular - SignaturePad:出现在 AppModule 的 NgModule.imports 中,但无法解析为 NgModule 类