JavaScript — проблемы с методом eventListener

Я работаю с html-формами и добавляю функциональность кнопкам с помощью JS. Я создал для захвата имени пользователя, как только оно будет введено в текстовое поле. Проблема в том, что когда я пытаюсь отобразить ввод пользователя на консоли, он появляется на очень короткое мгновение, а затем исчезает. `

Ниже приведен мой HTML-код:

    <form action = "">
        <div>
            <label for = "myName">Name</label>
        </div>
        <div>
            <input type = "text" name = "myName" id = "myName" class = "name">
        </div>
            <button class = "thisOne">Collect Info</button>

    </form>`

Следующий мой JS

` let input_name = document.querySelector('.name');
     let btn = document.querySelector('button');
     btn.addEventListener('click', ()=>{   
     console.info(input_name.value);
      });`
<button> имеют тип по умолчанию «отправить», см. здесь. По этой причине они отправят форму и перенаправят вас на URL-адрес, указанный в его атрибуте действия.
Carsten Massmann 06.04.2022 20:49

Установите тип кнопки «кнопка». Я знаю, что это звучит избыточно, но дает вам кнопку без каких-либо действий (например, отправить).

Phaelax z 06.04.2022 20:52

Phaelax z, вы имеете в виду добавление <input type='button'> Я не знал, что <button> ведет себя таким запутанным образом. Ну, я большой, поэтому не совсем понимаю, как все работает.

Alexander Martinez 06.04.2022 20:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте событие и preventDefault, чтобы предотвратить отправку формы.

const input_name = document.querySelector('.name');

const btn = document.querySelector('.thisOne');

btn.addEventListener('click', (e)=>{
  e.preventDefault();
  console.info(input_name.value);
});
<form action = "">
  <div>
      <label for = "myName">Name</label>
  </div>
  <div>
      <input type = "text" name = "myName" id = "myName" class = "name">
  </div>
      <button class = "thisOne">Collect Info</button>
</form>

Ух ты!!! exphoenee, спасибо большое!!!!

Alexander Martinez 06.04.2022 21:12

Другие вопросы по теме