console.log не работает внутри отправки события - PullRequest
Новая
       36

console.log не работает внутри отправки события

0 голосов
/ 18 сентября 2018

Я не могу сделать console.log.За пределами слушателя событий это работает безупречно.Но когда я хочу сделать console.log в обработчике событий (отправка формы), в консоли ничего не появляется. 

<form id="formMovies">
    <input type="text" id="title">
    <button type="submit" id="boton">Guardar</button>
</form>

<script>
var _form = document.querySelector("#formMovies");
var _title = document.querySelector("#title").value;

_form.addEventListener('submit', ()=>{
    console.log(_title);
});
</script>

Ответы [ 3 ]

0 голосов
/ 18 сентября 2018

Это произошло потому, что действие "отправить" обновило страницу, что означает, что консоль браузера будет перезагружена, и все журналы будут очищены.

Если вы хотите остановить это поведение, чтобы увидеть ваше сообщение журнала, вы можетеиспользуйте preventDefault() или return false; как: 

_form.addEventListener('submit', (e)=>{
     e.preventDefault();
     console.log(_title);

     //Or
     //return false;
});
0 голосов
/ 18 сентября 2018

вы должны предотвратить действие по умолчанию, которое запускается (которое заменяет / перезагружает страницу чем-то другим) на type=submit, и явно отправить форму с form.submit(), возможно, через несколько секунд, в зависимости от ваших потребностей; 

var _form = document.querySelector("#formMovies");
var _title = document.querySelector("#title").value;

_form.addEventListener('submit', evt => {
    evt.preventDefault();
    console.log(_title);
});
0 голосов
/ 18 сентября 2018

Проблема заключается в том, что когда код запускается до нажатия кнопки, значение не устанавливается на _title.Возьмите значение внутри функции обработчика событий.Вы также можете использовать event.preventDefault(), чтобы предотвратить отправку формы, и вы можете увидеть результат. 

<form id="formMovies">
    <input type="text" id="title">
    <button type="submit" id="boton">Guardar</button>
</form>

<script>
var _form = document.querySelector("#formMovies");

_form.addEventListener('submit', (e)=>{
  var _title = document.querySelector("#title").value;
  console.log(_title);
  e.preventDefault();
});
</script>
...