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或动作）或不同的页面，因此您将无法看到控制台输出

据我所知，发现了两种解决问题的方法

在事件上调用 preventDefault ，它将停止重定向并显示控制台输出

代码段

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 =“＃”

代码段

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);
});

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

4 个答案: