JS表单提交后输入值未存入变量显示undefined问题

变量取值时机错误。你在全局作用域下声明userInput1等三个变量时，就立刻执行了getElementById(...).value的取值逻辑，这部分代码会在页面刚加载完成时就运行，此时用户还没在输入框内填写内容，取到的自然是空值/undefined。后续提交表单触发king()函数时，直接调用了页面初始化阶段就存好的旧变量，不会重新拉取用户最新输入的内容，所以输出结果为undefined。

把取值逻辑移到king()函数内部，等提交触发函数时再实时读取输入框的最新值：

function king() {
  var userInput1 = document.getElementById("inp1").value;
  var userInput2 = document.getElementById("inp2").value;
  var userInput3 = document.getElementById("inp3").value;
  document.write("Welcome " + userInput1)
  return false;
}

• 检查三个输入框的id属性是否和代码中传入getElementById的字符串完全匹配，id拼写错误会导致无法获取到对应DOM元素，读取value时会触发报错
• 确认绑定提交事件、触发king()函数时，页面上的输入框DOM已经完成渲染，不要在DOM节点还没加载的阶段提前执行DOM查询逻辑

内容的提问来源于stack exchange，提问作者Shaurya