css 为什么表单值从控制台日志中消失？

ui7jx7zq 于 2022-12-27 发布在其他

关注(0)|答案(3)|浏览(161)

在下面的代码中，我尝试在单击按钮时console.log表单输入值。然而，在单击按钮时，值只是暂时记录，然后消失。为什么会发生这种情况？如何解决？

document.querySelector("button").addEventListener("click",function(){
  const listItem = document.querySelector("input").value;
  console.log(listItem);
});

<body>  
  <form action="">
    <input type="text">
    <button class ="btn btn-lg btn-primary" type="submit"> ADD </button>
  </form>
</body>

css

来源：https://stackoverflow.com/questions/63095503/why-is-the-form-value-disappearing-from-the-console-log

3条答案

按热度按时间

zbdgwd5y1#

这是因为提交表单时浏览器会重新加载。您的数据会丢失。要防止这种情况，只需在将“event”作为参数传递到事件侦听器函数后，在日志语句后使用“event.preventDefault（）”函数即可。如下所示：
查询选择器（“按钮”）.添加事件监听器（“点击”，函数（事件）{ const listItem =文档.查询选择器（“输入”）.值;
控制台日志（列表项）;***事件预防默认值（）;***}的报告）;

赞(0）回复(0）举报 2022-12-27

42fyovps2#

提交表单时，浏览器会向服务器发送请求并刷新页面。

document.querySelector("button").addEventListener("click",function(event){
  event.preventDefault();
  const listItem = document.querySelector("input").value;
  console.log(listItem);
});

<body>  
  <form action="">
    <input type="text">
    <button class ="btn btn-lg btn-primary" type="submit"> ADD </button>
  </form>
</body>

赞(0）回复(0）举报 2022-12-27

pinkon5k3#

其他人解释说提交表单会重新加载页面，但这并没有真正解决控制台日志的问题。
转到开发者工具设置，并在控制台部分选中导航时保留日志。这样，当页面重新加载时，您就不会因为表单提交而丢失日志消息。

赞(0）回复(0）举报 2022-12-27

我来回答

css 为什么表单值从控制台日志中消失？

3条答案

相关问题

热门标签

最新问答