时间戳

首页 > 解决方案 > 为什么表单值从控制台日志中消失？

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

问题描述

在下面的代码中，我试图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>

标签： javascripthtmlcssforms

解决方案

提交表单时，浏览器向服务器发送请求并刷新页面。要禁用此行为，您可以event.preventDefault()在单击按钮时使用

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>

推荐阅读