为何HTML页面用户输入未被正确读取？如何获取真实输入值

你当前的代码里，var g = document.getElementById("al").value; 是页面加载完成后立刻执行的，只会获取输入框的初始值（55）。之后用户修改输入框内容时，这个全局变量g不会自动同步更新，所以点击按钮时始终用的是最初的旧值。

把获取输入框值的逻辑移到start函数内部，让每次点击按钮时都重新读取输入框的当前内容：

修改后的JS代码：

function start() {
  // 每次点击按钮时，重新获取输入框的当前值
  var g = document.getElementById("al").value;
  document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g);
}

HTML代码无需修改：

<p id="test2">Output is here:</p>
<form>
  <label for="g">a:</label>
  <input type="number" id="al" name="g" placeholder="Enter a" value="55">
  <button onclick="start()" type="button">Here</button>
</form>

如果想让类型显示为number，可以先把输入的字符串转成数值再获取类型：

function start() {
  var inputValue = document.getElementById("al").value;
  var numValue = parseFloat(inputValue);
  document.getElementById("test2").innerHTML = typeof(numValue) + numValue;
}

内容的提问来源于stack exchange，提问作者M.Riyan