Console.log () и el.innerText сбрасываются немедленно (помощь) - PullRequest
Новая
       71

Console.log () и el.innerText сбрасываются немедленно (помощь)

0 голосов
/ 26 марта 2020

У меня есть этот простой шаблон в файле html. Каждый раз, когда я нажимаю кнопку, она должна регистрировать событие щелчка и печатать «[NodeList]» в элементе #result, но это не так. Фактически он печатает его за миллисекунды, а затем снова удаляет. То же самое и с console.log (e). Я записал это поведение: Ссылка на видео: https://drive.google.com/file/d/1B7TycQxZPi0dqx7Try6kUZM3pcJs0ILW/view

Кто-нибудь может предложить исправление? 

document.getElementById("btn").addEventListener("click", e => {
  console.log(e);
  result.innerText = document.getElementsByName("day");
});
<h1>Your Day Plan:</h1>
<p>Enter your day</p>
<form>
  <input type="radio" id="mon" name="day" value="mon" />
  <label for="mon">mon</label><br />
  <input type="radio" id="tue" name="day" value="tue" />
  <label for="tue">tue</label><br />
  <input type="radio" id="wed" name="day" value="wed" />
  <label for="wed">wed</label><br />
  <input type="radio" id="thu" name="day" value="thu" />
  <label for="thu">thu</label><br />
  <input type="radio" id="fri" name="day" value="fri" />
  <label for="fri">fri</label><br />
  <button id="btn">Calculate Plan</button>
</form>
<h5 id="result"></h5>

1 Ответ

0 голосов
/ 26 марта 2020

Тип кнопки по умолчанию - «Отправить». Чтобы предотвратить отправку формы, необходимо указать type="button" вручную: 

<button type="button" id="btn">Calculate Plan</button>

ИЛИ: использовать event.preventDefault ()

Метод интерфейса *1014* Event интерфейса сообщает агенту пользователя, что, если событие не обрабатывается явно, его действие по умолчанию не следует принимать как обычно. 

<h1>Your Day Plan:</h1>
<p>Enter your day</p>
<form>
  <input type="radio" id="mon" name="day" value="mon" />
  <label for="mon">mon</label><br />
  <input type="radio" id="tue" name="day" value="tue" />
  <label for="tue">tue</label><br />
  <input type="radio" id="wed" name="day" value="wed" />
  <label for="wed">wed</label><br />
  <input type="radio" id="thu" name="day" value="thu" />
  <label for="thu">thu</label><br />
  <input type="radio" id="fri" name="day" value="fri" />
  <label for="fri">fri</label><br />
  <button id="btn">Calculate Plan</button>
</form>
<h5 id="result"></h5>

<script>

  document.getElementById("btn").addEventListener("click", e => {
    console.log(e);
    result.innerText = document.getElementsByName("day");
    event.preventDefault();
  });

</script>
...