Как исправить этот JavaScript код

Question

Ожидаемое поведение: При нажатии на первую кнопку появляется вторая кнопка, а при нажатии на вторую кнопку вторая кнопка исчезает. Можете помочь мне исправить мой код. У меня при нажатии на первую кнопку появляется вторая, при нажатии на вторую вторая исчезает, но при повторном нажатии на первую вторая не появляется.

let Mybutton = document.getElementById("first");
let Form = document.getElementById("myform");
let isNewButtonExist = false;
let str = `<button id = "second" > Вторая кнопка </button>`;
let NewButton;

Mybutton.addEventListener("click", function(event) {
  if (isNewButtonExist === false) {
    Form.innerHTML += `<button id = "second" > Вторая кнопка </button>`;
    isNewButtonExist = true;
  }

  if (isNewButtonExist === true) {
    NewButton = document.getElementById("second");
    NewButton.addEventListener("click", function() {
      isNewButtonExist = false;
      NewButton.remove();
      NewButton = null;
    });
  }
})

.MyWindow {
  border: 3px solid black;
  width: calc(1000px + 6px);
  height: calc(800px + 6px);
  box-sizing: border-box;
  margin-left: 100px;
  margin-top: 20px;
  background-color: #ffffff;
}

button {
  /* border: 1px solid black; */
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  margin-left: 20px;
  margin-top: 25px;
}

<html>

<head>

  <body>
    <div class="MyWindow">
      <form action="#" id="myform">
        <button id="first"> Первая кнопка </button>
      </form>
    </div>
    <script src="testjs.js">
    </script>
  </body>

</html>

Answer 1

Проблема в том, что вы меняете html формы, а когда это происходит то все слушатели "спадают". Нужно заново вешать слушателей.

я добавил так:

Form.querySelector("#first").addEventListener("click", onFirstButtonClick);

смотрите пример полностью:

let Mybutton = document.getElementById("first");
let Form = document.getElementById("myform");
let isNewButtonExist = false;
let str = `<button id = "second"  type="button"> Вторая кнопка </button>`;
let NewButton;

Mybutton.addEventListener("click", onFirstButtonClick);

function onFirstButtonClick(event) {  
  if (isNewButtonExist === false) {
    Form.innerHTML += `<button id="second"  type="button"> Вторая кнопка </button>`;
    isNewButtonExist = true;
    Form.querySelector("#first").addEventListener("click", onFirstButtonClick);
  }

  if (isNewButtonExist === true) {
    NewButton = document.getElementById("second");
    NewButton.addEventListener("click", function() {
      isNewButtonExist = false;
      NewButton.remove();
      NewButton = null;
    });
  }
}

.MyWindow {
  border: 3px solid black;
  width: calc(1000px + 6px);
  height: calc(800px + 6px);
  box-sizing: border-box;
  margin-left: 100px;
  margin-top: 20px;
  background-color: #ffffff;
}

button {
  /* border: 1px solid black; */
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  margin-left: 20px;
  margin-top: 25px;
}

<div class="MyWindow">
  <form action="#" id="myform">
    <button id="first" type="button"> Первая кнопка </button>
  </form>
</div>

Но это *очень кривой вариант.. Вам нужно изучить тему делегирование событий, как раз необходимых в тот момент, когда есть динамически меняющийся контент, как у вас.

А вообще, в данном конкретном случае я бы просто сразу бы добавил кнопку в html, сделал бы display: none, а по клику просто показывал её или скрывал... то есть без физического удаления.

P.S.

Также обратите внимание, что тип кнопок специально поставил button, потому что в ином случае по умолчанию они будут триггерить сабмит формы

БЛОГ НА HUSL

Как исправить этот JavaScript код

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

P.S.