JavaScript如何根据用户文本框输入内容实现页面跳转

存在的问题 #

• 未读取输入框实际值：document.getElementById("nextId")仅获取到输入框的DOM元素，没有获取用户输入的内容，需要补充.value属性
• error变量未初始化：代码直接使用error +=拼接提示内容，但没有提前声明error变量并赋值为空字符串，运行时会触发未定义报错
• 函数名大小写不匹配：JS中定义的函数名为valForm（首字母F大写），但HTML按钮的onclick事件中调用的是valform()（首字母f小写），大小写不一致导致点击按钮无法触发函数
• 数据类型不匹配：输入框读取的内容为字符串类型，直接和数字430做对比不会生效，需要先转换为数字，或直接和字符串'430'对比
• 跳转属性写法不规范：window.location是复合对象，明确指定跳转地址建议用window.location.href属性

修正后的代码 #

JS代码 #

function valForm() {
  // 初始化错误提示变量
  var error = "";
  // 获取输入框的实际输入值
  var firstVal = document.getElementById("nextId").value;
  if (firstVal.length == 0) {
    error += "请填写工位号\n";
  }
  // 转换为数字后对比，或者直接写firstVal == '430'也可生效
  if (Number(firstVal) == 430) {
    window.location.href = "https://awebsite";
  }
  if (error) {
    alert(error);
  }
}

HTML代码 #

<input type="text" placeholder="车牌号码" class="form-control" id="name-form9-z" />
<div class="ticketId">
  <input type="text" placeholder="票据编号" class="form-control" id="nextId">
</div>
<!-- 修正函数名大小写，和JS定义保持一致 -->
<button class="btn btn-primary display-4" type="button" onclick="valForm()">下一步</button>

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