как пролистать текст, если установлен флажок - PullRequest
Новая
       38

как пролистать текст, если установлен флажок

0 голосов
/ 05 апреля 2020

Я пытаюсь создать список дел с флажком для каждого элемента. Когда флажок установлен, я хочу, чтобы мой элемент был стилизован для сквозного ввода.

Вот мой код

У меня есть HTML

<h1>My List</h1>
<input id="item" type="text" />
<button id="add">Add</button>
<ul id="toDo"></ul>

и js 

document.addEventListener('DOMContentLoaded', function () {
    const addButton = document.querySelector('#addButton');

    addButton.addEventListener('click', function () {
        const textInput = document.querySelector('#itemText');
        const itemText  = textInput.value;

        if (itemText) {
            const ul = document.querySelector('ul');
            const li = document.createElement('li');

            li.addEventListener('click', function (e) {
              if (e.target!=checkbox){
                e.target.parentNode.removeChild(e.target);
              }

              //i try do use this
              if (e.target==checkbox){
              if (checkbox.checked == true){
               e.target.parentNode.textContent.style.textDecoration = "linethrough";

               } 
              }


            });


          var checkbox = document.createElement('input');
          checkbox.type = "checkbox";
          checkbox.value = 0;

          li.appendChild(checkbox);
          li.appendChild(document.createTextNode(itemText));

           ul.appendChild(li);
           textInput.value = '';
        }
    });
});

Я получаю Uncaught TypeError: Невозможно установить свойство 'textDecoration' из неопределенного. Как оформить текст рядом с установленным флажком?

1 Ответ

0 голосов
/ 05 апреля 2020

e.target.parentNode.textContent является чистой строкой, поэтому вы не можете использовать style и textDecoration в этом случае.

Также используйте «сквозную линию» вместо «linethrough»

Поэтому используйте ниже единицы и будет в порядке!

e.target.parentNode.style.textDecoration = "line-through";

...