console.log在事件提交中不起作用

Question

我不能做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>

Answer 1

之所以发生这种情况，是因为“提交”操作会刷新页面，这意味着将重新加载浏览器控制台并清除所有日志。

如果要停止此行为以查看日志消息，可以使用preventDefault()或return false;，如：

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

     //Or
     //return false;
});

Answer 2

您必须在type=submit上阻止获取触发的默认操作（用其他东西替换/重新加载页面），并根据您的需要在几秒钟后明确提交带有form.submit()的表单;

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

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

Answer 3

问题是当代码在单击按钮之前运行时，没有设置为_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>