Question

因此，我的HTML页面启动like this，在创建新版时，它会this，当我开始创建新的列表项时变得像this，到目前为止看起来还不错......但是当我创建第二部分时，我无法在其中创建任何新的列表项，或者我可以，但他们都打印在第1部分，是的猜测可能是id-s在这里混淆，但我不知道如何让它工作.... 与我的列表项文本之前的复选框有同样的问题，我只是不能使我的div元素的背景颜色在选中时变为绿色，因为我猜想ID中的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);
})

你能帮忙吗？

Answer 1

正如您所假设的那样，脚本会被多次使用的相同ID“混淆”。根据定义，ID是唯一标识符。脚本应该如何知道您要选择哪个元素？

实际上你甚至不需要每次都按照它的ID来选择元素，因为你已经可以在变换中使用它。

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

P.S：为了获得更好的性能，通常应该避免使用

document.getElementByID()

每次你需要对它做一些相同的元素。只需将其分配给变量一次并使用该引用。

更高级的TODO列表，javascript

1 个答案: