如何根据用户输入重定向javascript

Question

我找不到根据用户在文本字段中键入的内容重定向我网站上的用户的工作方法。 我曾尝试使用下面的代码，但没有成功。 有人可以指导我。

 function valForm() { var firstVal = document.getElementById("nextId"); if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location = "https://awebsite"; } if (error) { alert(error); } }

 <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4" type="button" onclick="valform()">next</button>

Answer 1

首先，您的按钮标签中有一个错字。 请将 valform() 更改为 valForm()。 你的函数也有一些错误。

• 在 valForm 函数中使用之前定义变量错误。
• var firstVal = document.getElementById("nextId") 应该是 var firstVal = document.getElementById("nextId").value;
• window.location="https://awebsite" 应该是 window.location.href = "https://awebsite";;

下面是完整的代码。

function valForm() {
    var firstVal = document.getElementById("nextId").value;
    var error = ''
    if (firstVal.length == 0) {
      error += "Desk Number is required\n";
    }

    if (firstVal == 430) {
      window.location.href = "https://awebsite";
    }

    if (error) {
      alert(error);
    }
  }

Answer 2

1. JS 区分大小写所以 valForm 两个地方
2. 输入有值所以var firstVal = document.getElementById("nextId").value;
3. 你没有定义错误

然而 window.location 可以在没有 .href 的情况下使用，但建议使用 location.href 或 window.location.href 只是为了习惯 .href 如果你想阅读字符串

我建议您改用提交事件并使用 addEventListener 来避免内联事件处理程序。 我将元素包裹在表单标签中以使用表单的提交事件

 document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // stop submission let error = ""; var firstVal = document.getElementById("nextId").value; console.log(firstVal) if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location = "https://awebsite"; } if (error) { alert(error); } })

 <form id="myForm"> <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4">next</button> </form>

Answer 3

截至目前，您只持有输入值的 DOM 引用。

var firstVal = document.getElementById("nextId"); .

您还没有获得价值。

var firstVal = document.getElementById("nextId").value; .

另请注意，您在函数调用中缺少驼峰式命名法。 JavaScript 区分大小写。

<button class="btn btn-primary display-4" type="button" onclick="valform()">next</button> 。

应该：

<button class="btn btn-primary display-4" type="button" onclick="valForm()">next</button>

完整代码：

 function valForm() { var firstVal = document.getElementById("nextId").value; if (firstVal.length == 0) { error += "Desk Number is required\\n"; } if (firstVal == 430) { window.location.href = "https://awebsite"; } if (error) { alert(error); } }

 <input type="text" placeholder="License Plate" class="form-control" id="name-form9-z" /> <div class="ticketId"> <input type="text" placeholder="Ticket ID" class="form-control" id="nextId"> </div> <button class="btn btn-primary display-4" type="button" onclick="valForm()">next</button>

我将不得不假设错误是在您提供的代码之外的某个地方定义的，否则它会抛出error未定义的error 。

Answer 4

我已经修复了你告诉我不好的所有事情，但是当我输入好的值时，我的按钮仍然没有将我重定向到另一个页面。 还有其他建议吗？