0

Как сделать так, чтобы if (event.target.tagName === 'LI') срабатывал не на все LI, а только на конкретную? Спасибо!

let post = document.getElementById('post');
let article = document.querySelector('ol');
let send = document.getElementById('header__request')

post.addEventListener('submit', function(event) {
  event.preventDefault();
  if (send.value.length == 0) {
    alert('Поле пустое');
  } else {
    let elem = document.createElement('li');
    elem.textContent = send.value;
    article.appendChild(elem);
    post.reset();
  };
});

article.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    this.className = (this.className == 'article line' ? 'article' : 'article line');
  }
})
<h1 class="header__title">Список задач</h1>
<form id="post">
  <input class="header__request" type="text" name="Задача" id="header__request">
  <button type="submit" class="header__btn" id="header__btn">Добавить</button>
</form>
<h5>Ваши задачи:</h5>
<ol class="article" start="1">
</ol>

1
  • event.target.className = (event.target.className == 'article line' ? 'article' : 'article line'); Пример - jsfiddle.net/781g6pyz
    – soledar10
    21 апр 2020 в 7:19

1 ответ 1

1

let post = document.getElementById('post');
let article = document.querySelector('ol');
let send = document.getElementById('header__request')

post.addEventListener('submit', function(event) {
  event.preventDefault();
  if (send.value.length == 0) {
    alert('Поле пустое');
  } else {
    let elem = document.createElement('li');
    elem.textContent = send.value;
    article.appendChild(elem);
    post.reset();
  };
});

    article.addEventListener('click', function(event) {
       if (event.target.tagName === 'LI') {
          event.target.className = (event.target.className == 'article line' ? 
          'article' : 'article line');
       }
    })
.line{
  text-decoration: line-through;
}
<h1 class="header__title">Список задач</h1>
<form id="post">
  <input class="header__request" type="text" name="Задача" id="header__request">
  <button type="submit" class="header__btn" id="header__btn">Добавить</button>
</form>
<h5>Ваши задачи:</h5>
<ol class="article" start="1">
</ol>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.