将功能切换到用户添加的 li

Question

所以，切中要点。代码工作正常，我现在保持简单。

需要对添加“li”的用户应用“toggle”class“done”。

var userInput = document.getElementById("data");
var button = document.getElementById("btn");
var ul = document.querySelector("ul");

button.addEventListener("click", function(){
    if(userInput.value.length > 0){
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(userInput.value));
        ul.appendChild(li);
        userInput.value = "";
    }
});
    
userInput.addEventListener("keypress", function(){
    if(userInput.value.length > 0 && event.which === 13){
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(userInput.value));
        ul.appendChild(li);
        userInput.value = ""; 
    }
});

.done {
    text-decoration: line-through
}

<h1>Shopping List</h1>
<input id="data" type="text" placeholder="Enter items">
<button id="btn">Add item</button>
<ul>
</ul>

Answer 1

这应该有效。

var userInput = document.getElementById("data");
var button = document.getElementById("btn");
var ul = document.querySelector("ul");

button.addEventListener("click", function(){
    if(userInput.value.length > 0){
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(userInput.value));
        ul.appendChild(li);
        userInput.value = "";
    }
});

userInput.addEventListener("keypress", function(){
    if(userInput.value.length > 0 && event.which === 13){
        var li = document.createElement("li");
        li.addEventListener('click', function() {
        if (li.classList.contains('done')) {
            li.classList.remove('done');
            } else {
                li.classList.add('done');
            }
        });
        
        li.appendChild(document.createTextNode(userInput.value));
        ul.appendChild(li);
        userInput.value = ""; 
    }
});

Answer 2

我不清楚你想做什么但是如果你想给用户一个选项来标记它完成而不是你需要将事件监听器绑定到 li 与 'click' 事件和那个回调你可以切换 class

    var li = document.querySelector(li");

    li.addEventListener("click", function(){
        // toggle logic
    }) ;

Answer 3

最简单的方法是利用 classList 提供的 toggle() 功能。

document.querySelectorAll('li').forEach(function(li){
  li.addEventListener('click', function(){
    this.classList.toggle('done')
  })
})

li{
  background: blue
}

li.done{
  background: red
}

<ul>
  <li>line 1</li>
  <li>line 2</li>
  <li>line 3</li>
</ul>

将功能切换到用户添加的 li

Toggle function to user added li

javascript

css

toggle