Можно ли на одну кнопку повесить два события

Question

У меня есть лист из объектов, при нажатии кнопки в первый раз контент объекта появляется на странице с помощью данных строк:

let content = document.getElementById("First");
let button_add = document.getElementById("Add")
button_add.addEventListener('click', Add);

function Add() {
  let inserted = `...`
  content.insertAdjacentHTML('beforeend', inserted)
}

Хочу сделать так, чтобы при нажатии на кнопку повторно контент объекта пропадал со странички и тд.

Подскажите, пожалуйста, как грамотнее это оформить Пробовала такой вариант, но все перестало работать

let content = document.getElementById("First");
let button_add = document.getElementById("Add")
let flag = True;
if (flag) {
  button_add_all.addEventListener('click', Add);
  flag = False;
} else {
  button_add.addEventListener('click', Delete);
  flag = True;
}

function Delete() {
  content.remove()
}

function Add() {
  let inserted = `...`

  content.insertAdjacentHTML('beforeend', inserted)
}

Answer 1

Создайте один метод и вызывайте всегда его. А вашу логику добавьте в него. Примерно как-то так

let content = document.getElementById("First");
let button = document.getElementById("Add");
let flag = true;

button.addEventListener('click', AddDelete);


function AddDelete() {
  
  if (flag) {
     let inserted = `...`;
     content.innerHTML = inserted;
  } else {
     content.innerHTML = "";         
  }
  flag = !flag;
  console.log(flag);
}

<div id="First">...</div>
<button id="Add">add</button>

Answer 2

переписала код так:

let array=[
    one={
        1 : "1.jpg",
        2: "2.jpg",
        3: "3.jpg",
        text: "Text is here",
        link: "Продолжение"
    }]
let content = document.getElementById("First");
let button_add = document.getElementById("Add")
button_add.addEventListener('click',Add);
let flag = true;

function Add()
{   
    if (flag == true){
    let inserted =

    `
    <div id="First">
    <div id="Photos">
        <div ><img src=${one.1}></div>
        <div ><img src=${one.2}></div> 
        <div ><img  src=${one.3}></div>
    </div>
    <div>
    <p > ${one.text}</p>
    <a >${one.link}</a>
    </div>
    </div>`
    content.insertAdjacentHTML('beforeend',inserted)
    flag=false;
}else{
    content1.remove();
    flag = true;
}

}

Теперь программа позволяет добавить контент, затем удалить,но всего один раз. Т. е. нажимаю первый раз на кнопку-контент добавляется, второй-удаляется, третий- ничего не происходит.

БЛОГ НА HUSL

Можно ли на одну кнопку повесить два события

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