как заставить значки переключаться вместе с <li>в событии клика

Question

Я хочу переключить элемент списка для отображения. когда она нажата, я хочу, чтобы значок галочки переключался с щелчком. Он работает с элементом 1 <li>, но когда я добавляю еще один элемент и щелкаю по нему, первый тик исчезает.

Как я могу сохранить первый тик после нажатия второго? Это специальное упражнение для DOM.

Сначала я настраиваю прослушиватель событий для отправки в мою форму. При отправке я создаю div и li. Затем по щелчку li я добавляю значок.

HTML:

<div class='body-container'>
    <p class="subtitle">Please add an item</p>

    <form id="myForm" class='form'>
        <input type="text">
        <button type="submit">submit</button>
    </form>

    <h2>Items</h2>
    <div>
        <ol class="item">

        </ol>
    </div>
    <div class="footer">

    </div>
</div>

ЯШ:

//grab the target from the form submission
const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');
const i = document.createElement('i')

myForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = event.target[0].value;
  const li = document.createElement('li');
  const div = document.createElement('div');
  li.classList.add('test');

  li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
  })

  li.appendChild(document.createTextNode(value));
  div.appendChild(li)
  ol.appendChild(div)    
})     

В тот момент, когда я отмечаю второй пункт, клещи обоих ли исчезают

Answer 1

Привет, Эвандро Кавалькате, Сантос, я думал просто сдвинуть линию

const i = document.createElement('i')

для myForm eventListener, как вы это сделали, потому что он был создан с глобальной областью действия, и каждый div будет ссылаться на тот же глобальный 'i'. Я не думаю, что «id» необходим для каждого li. Дай мне знать. Спасибо

//grab the target from the form submission
const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');


myForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const value = event.target[0].value;
  const li = document.createElement('li');
  const div = document.createElement('div');
  const i = document.createElement('i')
  li.classList.add('test');
  

  li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
  })

  li.appendChild(document.createTextNode(value));
  div.appendChild(li)
  ol.appendChild(div)    
  
})

i.fas:after{
  content: "X"
}
.strike{
  border:1px solid red;
}

<div class='body-container'>
    <p class="subtitle">Please add an item</p>

    <form id="myForm" class='form'>
        <input type="text">
        <button type="submit">submit</button>
    </form>

    <h2>Items</h2>
    <div>
        <ol class="item">

        </ol>
    </div>
    <div class="footer">

    </div>
</div>

Answer 2

Это способ добиться этого, ваш код был почти верным

const myForm = document.querySelector('#myForm');
const item = document.querySelector('.item');
const ol = document.querySelector('ol');

myForm.addEventListener('submit', (event) => {
event.preventDefault();
const value = event.target[0].value;
const li = document.createElement('li');
const div = document.createElement('div');
const i = document.createElement('i');
li.id = `item-${new Date().getTime()}`
li.classList.add('test');

li.addEventListener('click', () => {
    div.classList.toggle('strike');
    div.appendChild(i);
    i.classList.toggle('fas');
    i.classList.toggle('fa-check');
})

    li.appendChild(document.createTextNode(value));
    div.appendChild(li)
    ol.appendChild(div)    
})