更高级的TODO列表javascript

A bit more advanced TODO list , javascript

本文关键字：javascript 列表 TODO 高级的      更新时间：2024-02-13

所以我的HTML页面是这样开始的，在创建新的部分时，它会这样做，当我开始创建新的列表项时，它就会变成这样，到目前为止，它看起来还可以……但当我创建第二部分时，我无法在其中创建任何新的列表项，或者我可以，但它们都打印在第一部分中，是的，我想可能id-s在这里被混淆了，但我不知道如何让它工作。我在列表项文本之前的复选框也有同样的问题，我只是无法在选中div元素时使其背景色变绿，因为我想系统中存在id混淆。因此，我的问题是如何使其在多个部分中按预期工作，其中包含多个列表项

这是我的HTML

    <html>
<head>
    <script src="Script1.js" type="text/javascript" ; defer></script>
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css">
</head>
    <body>
        <div id="wrapper">
            <h1>Tuesday TODO List</h1>
            <input type="text" id="sectionText" class="sectionText" placeholder="Title" />
            <button id="btn" class="btn">New Section</button>
        </div>
</body>
</html>

这是我的风格

div {
    border: 1px solid black;
    padding: 5px;
    width: 400px;
    margin: 0 auto;
}
    div h1 {
        text-align: center;
        margin-top: 0px;
        margin-bottom: 0px;
    }
section {
    border: 1px solid black;
    padding: 5px;
}
input[type=text] {
    margin-top:10px;
    margin-bottom:10px;
    padding: 3px;
    width: 150px;
    height: 20px;
}
div.listItem {
    border-bottom: 1px solid black;
    border-top:0;
    border-left:0;
    border-right:0;
    padding: 5px;
    width: auto;
}
input[type=checkbox]{
    height:15px;
    width:15px;
}
h3{
    margin-top:0px;
    margin-bottom:0px;
    text-align:center;
}

最重要的是我的脚本

var a = document.getElementById('btn');
a.addEventListener('click', function () {
    var section = document.createElement('section');
    section.setAttribute('id', 1);
    document.getElementById('wrapper').appendChild(section); //apendvame tuka kum bodito
    var h3 = document.createElement('h3');
    h3.innerText = document.getElementById('sectionText').value;
    section.appendChild(h3);
    var input = document.createElement('INPUT');
    input.setAttribute('type', 'text')
    input.setAttribute('id', 'txt');
    section.appendChild(input);
    var btn = document.createElement('button');
    btn.setAttribute('id', 'txtButton');
    btn.innerText = 'New List Item'
    section.appendChild(btn);
    var b = document.getElementById('txtButton');
    b.addEventListener('click', function () {
        var div = document.createElement('div');
        div.setAttribute('class', 'listItem');
        var checkbox = document.createElement('INPUT');
        checkbox.setAttribute('type', 'checkbox');
        checkbox.setAttribute('id', 'checker');
        div.appendChild(checkbox);
        var span = document.createElement('span')
        span.innerText = b.previousElementSibling.value;
        div.appendChild(span);
        document.getElementById('txt').parentNode.insertBefore(div, document.getElementById('txt'));
    }, false);
})

你能帮忙吗？

正如您正确假设的那样，脚本会被多次使用的同一ID"弄糊涂"。根据定义，ID是唯一的标识符。脚本应该如何知道要选择哪个元素？

实际上，您甚至不需要每次都根据元素的ID来选择元素，因为您已经在variable中提供了它。

通过一些小的修改来检查这个小提琴：https://jsfiddle.net/0df3jsad/

p.S：为了更好的性能，你通常应该避免使用

document.getElementByID()

每次需要对同一个元素执行某些操作时，只需将其分配给一个变量一次并使用该引用即可。

相关文章：