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

【问题标题】：console.log doesn't work inside event submitconsole.log 在事件提交中不起作用
【发布时间】：2020-07-22 02:52:43
【问题描述】：

我无法创建 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>

【问题讨论】：

你的意思是页面被替换后才能看到日志？
您在用户设置值之前读取了该值。第二次提交按钮会刷新，因此您的控制台将被清除，除非您选中复选框以在导航中保留控制台。
jQuery function not working on Form Submit 的可能重复项（原理相同，但这是 jquery 版本）

标签： javascript submit addeventlistener console.log

【解决方案1】：

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

如果您想停止这种行为以查看您的日志消息，您可以使用 preventDefault() 或 return false; ，例如：

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

     //Or
     //return false;
});

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

据我所知，已经找到了两种解决问题的方法

在将停止重定向的事件上调用 preventDefault 并看到控制台输出

代码sn-p

index.html

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

app.js

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

保留 href="#"

代码sn-p

index.html

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

app.js

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

【讨论】：