使用Javascript动态修改单击列表项_Javascript_Html_Css_List

使用Javascript动态修改单击列表项

javascript html css list

使用Javascript动态修改单击列表项,javascript,html,css,list,Javascript,Html,Css,List,我正在尝试用Javascript创建一个基本的待办事项列表。我对这种语言基本上没有经验，所以我尽量保持它的基础性。我希望在用户单击列表项时更改列表项的外观（例如，在文本中划行）。我一直在为一些JavaScript使用其他源代码，但出于某种原因，它不能与我的代码一起工作这里是问题点 <script> var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if

我正在尝试用Javascript创建一个基本的待办事项列表。我对这种语言基本上没有经验，所以我尽量保持它的基础性。我希望在用户单击列表项时更改列表项的外观（例如，在文本中划行）。我一直在为一些JavaScript使用其他源代码，但出于某种原因，它不能与我的代码一起工作

这里是问题点

<script>
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
   if (ev.target.tagName === 'LI') {
   ev.target.classList.toggle('checked');
  }
}, false); 
</script>

<html>
<ul id = "toDoList">
    <li id = "checked">Do laundry</li>
    <li>Wash car</li>
</ul>
</html>

如果有人能帮我解决这个问题，那就太棒了！（另外，不要使用JQuery，我对它一无所知。）

您必须在加载元素后运行javascript代码，否则您将找不到它，代码也无法工作

。已选中{
文字装饰：线条贯通；
}



洗衣服
洗车

var list=document.querySelector（'ul'）；
list.addEventListener（'click'，函数（ev）{
如果（ev.target.tagName=='LI'）{
ev.target.classList.toggle（'checked'）；
}
}，假）；

以下是解决您的问题的代码
然而，如果你想用JavaScript编写代码，我认为你应该学习JavaScript。JS语言与其他C语言（C、C++、java等）有类似的语法，但是在引擎盖上是非常不同的。br>

代码：

<html>
    <body>
        <style>
            .checked {
                text-decoration: line-through;
            }
        </style>
        <ul>
            <li class="item">task 1</li>
            <li class="item">task 2</li>
        </ul>
        <script>
        (function()
        {
            var items = Array.from(document.getElementsByClassName("item"));
            items.forEach(function(item)
            {
                item.onclick = function()
                {
                    item.className += " checked";
                }
            });
        })();
        </script>
    </body>
<html>


.检查{
文字装饰：线条贯通；
}

任务1
任务2

（功能（）
{
var items=Array.from（document.getElementsByClassName（“item”）；
items.forEach（功能（项目）
{
item.onclick=函数（）
{
item.className+=“选中”；
}
});
})();

什么实际上不起作用？顺便说一下，你应该有一个body标签。此外，右键单击并选择“检查元素”有助于查找错误。

<html>
    <body>
        <style>
            .checked {
                text-decoration: line-through;
            }
        </style>
        <ul>
            <li class="item">task 1</li>
            <li class="item">task 2</li>
        </ul>
        <script>
        (function()
        {
            var items = Array.from(document.getElementsByClassName("item"));
            items.forEach(function(item)
            {
                item.onclick = function()
                {
                    item.className += " checked";
                }
            });
        })();
        </script>
    </body>
<html>