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

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

Answer 3

您必须阻止在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 4

提交后，页面重定向到同一页面（没有 href 或 action）或不同，因此您无法看到控制台输出

据我所知，已经找到了 2 种方法来处理这个问题

1. 在将停止重定向的事件上调用preventDefault ，您会看到控制台输出

代码片段

索引.html

<a class="clear-tasks btn black" href="some url">Clear Tasks</a>

应用程序.js

const clearBtn = document.querySelector(".clear-tasks");
clearBtn.addEventListener('click',function(e){
    e.preventDefault();
    console.log(e);
});

2. 保留 href="#"

代码片段

索引.html

<a class="clear-tasks btn black" href="#">Clear Tasks</a>

应用程序.js

const clearBtn = document.querySelector(".clear-tasks");
clearBtn.addEventListener('click',(e)=>{
    console.log(e);
});