Question

如果我将输入字段包装在表单字段中，有人可以帮助我理解为什么控制台日志无法打印值吗？

HTML：

  <form>
      <input id="formEntry" type="text">
      <button id="btn-3">Add Custom Line</button>
  </form>

JavaScript的：

 var addCustomLine = function(){
      var customLine = document.getElementById("formEntry").value;
      console.log(customLine);
 }

 document.getElementById("btn-3").addEventListener ("click", addCustomLine, false);

Answer 1

通过不指定按钮类型，它默认提交父窗体。您可以通过将类型明确设置为“按钮”来阻止此行为。

<button type="button" id="btn-3">Add Custom Line</button>

Answer 2

默认情况下，<button>中的<form>将提交该表单，这将导致页面重新加载并使活动处理程序具有的所有效果无效。但是，您可以阻止这种行为：

function addCustomLine(event) {
    event.preventDefault();
    …
}

您希望通常在表单的submit事件上安装该处理程序，而不是按钮的click事件。

使用JavaScript获取表单中输入字段的值

2 个答案: