Javascript onClick只对其他所有li有效_Javascript_Html_Css_Html Lists

Javascript onClick只对其他所有li有效

javascript html css

Javascript onClick只对其他所有li有效,javascript,html,css,html-lists,Javascript,Html,Css,Html Lists,因此，我试图创建一个项目列表，当我单击它们时，它会切换一个类完成。我试图不使用jQuery 以下是我到目前为止得出的结论：目前，我的问题是我可以将项目作为li添加到列表中，但只有其他项目在单击时才会添加一个类“完成” 有人能解释一下为什么会这样吗？我感到困惑 HTML: 您没有输入错误，而是在this.classList.containsiteJm中添加了额外的J，您正在将多个单击事件附加到项目，因此每次添加新的li时，都会将一个新事件附加到所有li，这是导致单击事件无法正常工作的原因，我建议

因此，我试图创建一个项目列表，当我单击它们时，它会切换一个类完成。我试图不使用jQuery

以下是我到目前为止得出的结论：

目前，我的问题是我可以将项目作为li添加到列表中，但只有其他项目在单击时才会添加一个类“完成”

有人能解释一下为什么会这样吗？我感到困惑

HTML:

您没有输入错误，而是在this.classList.containsiteJm中添加了额外的J，您正在将多个单击事件附加到项目，因此每次添加新的li时，都会将一个新事件附加到所有li，这是导致单击事件无法正常工作的原因，我建议您在创建li时附加单击：

如果事件附加两次，切换函数将添加和删除该类，而您不会看到任何更改；如果添加三次，则添加、删除然后添加，然后您将看到该类，依此类推，当您添加第四个li时，第一个将有4个单击事件，单击时您不会注意到任何更改

var input=document.getElementById'userInput'； var button=document.getElementById'button'； var ul=document.querySelector'ul'； var li=document.getElementsByClassNameitem； //点击删除任务功能罢工{ 如果this.classList.containsitem{ this.classList.toggledone； } } 函数输入长度{ 返回input.value.length； } 函数createListElement{ var li=document.createElementli； li.appendChilddocument.createTextNodeinput.value； ul.appendChildli；类列表。添加“项”； input.value=； li.添加了Listener“单击”，删除； } 函数addToListAfterClick{ 如果inputLength>0{ createListElement； } } 函数addToListAfterEnterevent{ 如果inputLength>0&&event.keyCode==13{ createListElement； } } 按钮。addEventListener'click'，addToListAfterClick； input.addEventListener'keypress'，addToListAfterEnter； .完成{ 文字装饰：线条贯通； } 购物清单进来

非常感谢你的投入，我知道我错在哪里了。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>
</head>
<body>
    <h1>Shopping list</h1>
    <br> 
   <input id="userInput" placeholder="enter item" type="text">
   <button id="button">enter</button>
   <br>

    <ul class="list">
    </ul>

</body>
<script src="script.js"></script>
</html>

    var input = document.getElementById('userInput');
var button = document.getElementById('button');
var ul = document.querySelector('ul');
var li = document.getElementsByClassName("item");

// strikethrough task on click
function strike() {
    for(var i = 0; i < li.length; i++) 
    {
        li[i].addEventListener('click',function() {
            if(this.classList.contains("iteJm")) {
                this.classList.toggle("done");
            }
        }); 
    }
}

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    li.classList.add('item');
    input.value = '';
    strike();
}

function addToListAfterClick() {
    if(inputLength() > 0) {
        createListElement();
    }
}

function addToListAfterEnter(event) {
    if(inputLength() > 0 && event.keyCode == 13) {
        createListElement();

     }
}

button.addEventListener('click',addToListAfterClick);
input.addEventListener('keypress', addToListAfterEnter);

.done {
    text-decoration: line-through;
}

li.addEventListener('click', strike);