我如何将用户输入与数组进行比较
[英]How can i compare user input to an array
问题描述
我想将用户输入与数组进行比较。
示例：如果用户在输入字段中写入4，则应该向我们显示31，即那是我数组中第4个元素的值。
我的代码在做什么错？
<!DOCTYPE html> <html> <head> <title>Days in Months</title> <meta charset="utf-8"> <script type="text/javascript"> window.onload = showDays; var text = ""; // Days in each month, Jan - Dec var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // Months var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; function showDays() { document.getElementById("btn").onclick = selectMonth; } function selectMonth() { var input = document.getElementById("input").value; for (var i = 0; i < days.length; i++) { if (input === days[i]) { text += days[i]; } } document.getElementById("print").innerHTML = text; } </script> </head> <body> <h1>Show days in Month</h1> <input id="input" type="number" placeholder="Month (1-12)"> <button id="btn" type="button">Show Days</button> <p id="print"></p> </body> </html>
4 个解决方案
解决方案1
2 2017-10-04 16:28:34
您正在进行严格比较===所以1不等于“ 1”。 将输入转换为数字，例如
var input = Number(document.getElementById("input").value);
另请注意，javascript数组索引基于0，因此当您说用户输入“ 4”并且您想要数组的“第四”元素时，您真正想要的是数组索引3，因此
var input = Number(document.getElementById("input").value)-1;
解决方案2
2 2017-10-04 16:29:18
您只需要使用input值作为索引。
function selectMonth() {
var input = document.getElementById("input").value;
input = parseInt(input)-1;
if(input<months.length){
document.getElementById("print").innerHTML = `${months[input]} has ${days[input]} days.`;
}
}
解决方案3
1 2017-10-04 16:26:47
实际上，您不需要使用此for循环和if check（这是导致问题的原因，因为您使用===将string与Number进行比较）。
您只需要：
function selectMonth() {
var input = document.getElementById("input").value;
var index = parseInt(input);
if(input<months.length)
document.getElementById("print").innerHTML = months[index-1];
}
//
}
window.onload = showDays; var text = ""; // Days in each month, Jan - Dec var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // Months var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; function showDays() { document.getElementById("btn").onclick = selectMonth; } function selectMonth() { var input = document.getElementById("input").value; var index = parseInt(input); if (input < months.length) document.getElementById("print").innerHTML = months[index-1]; }
<h1>Show days in Month</h1> <input id="input" type="number" placeholder="Month (1-12)"> <button id="btn" type="button">Show Days</button> <p id="print"></p>
解决方案4
1 2017-10-04 16:34:12
有两件事-加载窗口时，您的第一行实际上并未调用showDays。 进行更改，以正确绑定您的点击处理程序：
window.onload = showDays; -> window.onload = showDays();
然后，通过确保您已从用户输入整数（并且该整数在正确的范围内），可以大大简化selectMonth选项。 然后，您可以直接使用该输入作为索引：
function selectMonth() {
var input = parseInt(document.getElementById("input").value, 10);
if(input > 0 && input < 13) {
text = `Days in ${months[input]}: ${days[input]}`
}
document.getElementById("print").innerHTML = text;
}
这里的例子：
window.onload = showDays(); var text = ""; // Days in each month, Jan - Dec var days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // Months var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; function showDays() { document.getElementById("btn").onclick = selectMonth; } function selectMonth() { var input = parseInt(document.getElementById("input").value, 10); if(input > 0 && input < 13) { text = `Days in ${months[input]}: ${days[input]}` } document.getElementById("print").innerHTML = text; }
<h1>Show days in Month</h1> <input id="input" type="number" placeholder="Month (1-12)"> <button id="btn" type="button" onclick="selectMonth();">Show Days</button> <p id="print"></p>
如何使用用户输入修改数组（在 html 中与表格一起显示）
[英]How can I modify array with user input (displayed with table in html)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.