Если я нажимаю на элемент списка, он включает и выключает класс .done - PullRequest
Новая
       18

Если я нажимаю на элемент списка, он включает и выключает класс .done

0 голосов
/ 30 мая 2018

Я хочу, чтобы у меня было li

Мой HTML 

<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>

Мой CSS 

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

Мой JS *.1010 * 

 var list = document.getElementsByTagName("li");
 list.addEventListener("click", function(e){
 list.classList.toggle("done");
 })

Я пытался: 

var list = document.querySelector("li");

очевидно, что он получает только первый li, поэтому я попытался querySelectorAll он не работает, он говорит мне об ошибке:

Uncaught TypeError: Невозможно прочитать свойство 'toggle' of undefined "

Ответы [ 5 ]

0 голосов
/ 21 апреля 2019

Я знаю, что вы нашли свой ответ, но позвольте мне показать вам более понятный способ сделать это: 

function toggleClassDoneOnAndOff(event) {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("done");
    }
}
ul.addEventListener("click", toggleClassDoneOnAndOff);

Надеюсь, вам понравится:)

0 голосов
/ 28 марта 2019

Код Javascript ниже: 

var list = document.querySelectorAll("li");

for(var i = 0; i < list.length; i++) {
    list[i].addEventListener("click", liClick); 
}

//function to add the 'line through' style
function liClick() {
    this.classList.toggle("done");
}

Код CSS ниже: 

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

Код HTML ниже: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylejs.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get is done today</p>
    <input id="userinput" type="text" placeholder="enter to-do">

    <button id="enter">Enter</button>

    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li>Jello</li>
        <li>Spinach</li>
        <li>Rice</li>
        <li>Birthday cake</li>
        <li>Candles</li>
    </ul>
    <script type="text/javascript" src="learndom.js"></script>
</body>
</html>
0 голосов
/ 30 мая 2018

Вам необходимо прикрепить click слушатель ко всем элементам li, которые вы получаете от document.getElementsByTagName("li");, так как getElementsByTagName() возвращает вам список элементов с этим тегом, и вам нужно назначить слушателя индивидуально для каждого тега.который отсутствовал в вашем коде и, следовательно, обнаруживалась ошибка. 

var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
 list[i].addEventListener("click", liClick);
}
function liClick(){
  this.classList.toggle("done");
}
.done {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>
0 голосов
/ 30 мая 2018

вместо добавления события к каждому элементу <li> добавьте только одно событие к <ul>, который следит за тем, на что вы кликаете, что поможет в дальнейшем, когда вы и новые задачи попадете в список 

var ul = document.querySelector("ul");
ul.addEventListener("click", function(e){
  evt.target.classList.toggle("done");
})

Но здесь вам также нужно следить за тем, на каком элементе вы нажимаете.возможно, вы только что нажали на ul или более глубокий элемент внутри элемента li

0 голосов
/ 30 мая 2018

Я использовал document.querySelectorAll, чтобы выбрать все li теги.

Затем перебрал коллекцию DOM объектов и прикрепил событие к каждому из них.Как вы заметите, я использую событие внутри click слушателя событий, чтобы включить класс done.

Надеюсь, это поможет 

var list = document.querySelectorAll("li");
for(var i = 0; i < list.length; i++) {
   list[i].addEventListener("click", function(e){
    e.currentTarget.classList.toggle("done");
   })
 }
.done {
  text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
    <title>Javascript + DOM</title>
    <link rel="stylesheet" type="text/css" href="5.3 style.css">
</head>
<body>
    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul>
        <li class="bold red" random="23">Notebook</li>
        <li class="bold red">Jello</li>
        <li class="bold red">Spinach</li>
        <li class="bold red">Rice</li>
        <li class="bold red">Birthday Cake</li>
        <li class="bold red">Candles</li>
    </ul>
    <script type="text/javascript" src="5.2 script.js"></script>
</body>
</html>
...