无法从 <input> 获取输入值答案

【问题标题】：unable to get input value from <input>无法从 <input> 获取输入值
【发布时间】：2021-03-23 09:21:47
【问题描述】：

我似乎无法获取“名称”的输入值，我曾尝试在 JS 中使用 .value，但是当我运行代码时，我得到了未定义。

HTML 代码

<div class="col-1">
<label for="fname">Name</label>
</div>
<div class="col-2">
<input type="text" id="fname"  placeholder="Enter name"  required>
</div>

<div class="col-3">
<button  onClick="gather()" id="submitButton">submit</button>
</div

JS代码

var submit = document.getElementById("submitButton");
submit.addEventListener("click",gather);

function gather(){
  name = document.getElementById("fname");
  message = "Thank you for subscribing "+name.value+ "!";
  alert(message);
}

【问题讨论】：

您是否尝试为输入提供一个空值参数？ value=""
奇怪，您的代码看起来正确。当您只记录输入元素（名称）时它会说什么？

标签： javascript html forms

【解决方案1】：

只需使用var 创建变量即可完成所有工作。

var submit = document.getElementById("submitButton");
submit.addEventListener("click",gather);
function gather(){
  var name = document.getElementById("fname");
  var message = "Thank you for subscribing "+name.value+ "!";
  alert(message);
}

<div class="col-1">
  <label for="fname">Name</label>
</div>
<div class="col-2">
  <input type="text" id="fname"  placeholder="Enter name"  required>
</div>
<div class="col-3">
  <button  onClick="gather()" id="submitButton">submit</button>
</div>

我建议你看看这篇文章：

Is var necessary when declaring Javascript variables?

【讨论】：

【解决方案2】：

您可以简单地在同一行中执行 .value 并获取元素的值

name = document.getElementById("fname").value;
console.log(name)

【讨论】：

【解决方案3】：

您必须将所有代码放入 window.onload。此方法在加载页面中的所有元素时运行您的代码。这将解决您的问题。

window.onload = () => {
//some js codes
}

【讨论】：