addEventListener не могу понять поведение

Question

Господа я новичок. не могу разобраться с поведением функции addEventListener. Задумка незамысловатая, но чую где-то подвох. Когда происходит событие клика по элементу id="add" должен появляться некий доп список, затем при втором клике пропадать, при следующем появляться и т.д. А он [список] появляется при первом клике, при втором пропадает и при последующих кликах ничего не происходит (а должно). Как правильно обрулить это с помощью addEventListener и без навешивания onclick ? Есть ли шансы?))) Ещё делал всякие проверки наличия класса у элемента в теле функции, но тоже чет не прошло (либо неверно делал). Ах да, ещё задача юзать стиль display: из тела html, ибо в настоящем документе там переплетения стилей, может что-то скорявить.

var click_1 = document.getElementById("add");
const disp = document.getElementById("val_1");
var disp_styles = window.getComputedStyle(disp).getPropertyValue("display");
var arr_tags = ['val_1', 'val_2', 'val_3'];

click_1.addEventListener('click', suppl_style_remove, true);
click_1.addEventListener('click', suppl_style, false);

function suppl_style() {
  arr_tags.forEach((tags) => {
    document.getElementById(tags).style.display = 'block';
  });
  setTimeout(() => console.log(disp_styles), 340);
  click_1.removeEventListener("click", suppl_style);
};

function suppl_style_remove() {
  arr_tags.forEach((tags) => {
    document.getElementById(tags).style.display = 'none';
  });
  setTimeout(() => console.log(disp_styles), 240);
  click_1.removeEventListener('click', suppl_style_remove);
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>qestion</title>
  <style>
    ul#val_1 {
      display: none;
    }
    
    ul#val_2 {
      display: none;
    }
    
    ul#val_3 {
      display: none;
    }
  </style>
</head>

<body>
  <li>
    <a href="#" id="add">
      <p>
        Add new value
      </p>
    </a>
    <ul id="val_1">
      <li class="">
        <a href="" class="">
          <i class=""></i>
          <p>value_1</p>
        </a>
      </li>
    </ul>
    <ul class="" id="val_2">
      <li class="nav-item">
        <a href="#" class="">
          <i class="far fa-circle nav-icon"></i>
          <p>value_2</p>
        </a>
      </li>
    </ul>
    <ul class="" id="val_3">
      <li class="">
        <a href="#" class="">
          <i class=""></i>
          <p>value_3</p>
        </a>
      </li>
    </ul>
  </li>
</body>

</html>

Answer 1

let a = true;

click_1.addEventListener('click', () => {
  if(a) {
    suppl_style();
    a = false;
  } else {
    suppl_style_remove();
    a = true;
  }
});

Я лишь добавил простой счетчик. Советую вам менять видимость элементов с помощью добавления/удаления классов элементам DOM (Объектная модель документа) - прочитайте про classList.

БЛОГ НА HUSL

addEventListener не могу понять поведение

Ответы (1 шт):