如何基于用户输入javascript重定向

Question

我找不到一种工作方式来重定向用户在我的网站上基于他们在文本字段上键入什么。我已经尝试使用这个代码，但没有成功。谁能给我指路?

function valForm() {
var firstVal = document.getElementById("nextId");
if (firstVal.length == 0) {
error += "Desk Number is requiredn";
}
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函数中使用前定义变量error
• 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 requiredn";
}
if (firstVal == 430) {
window.location.href = "https://awebsite";
}
if (error) {
alert(error);
}
}

Answer 2

到目前为止，您只持有输入的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 requiredn";
}
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未定义的错误。

Answer 3

1. JS是大小写敏感的，所以valForm两个位置
2. 输入值为sovar firstVal = document.getElementById("nextId").value;
3. 您没有定义错误
4. 可以使用un铰接plus或其他方法强制转换为number

窗口。不过，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 requiredn";
}
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>