How can i compare user input to an array
Question
I want to compare user input to an array.
Example: if a user would write 4 in the input field, it should show us 31 as thats the value of the 4th element in my array.
What am i doing wrong in my code?
<!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 answers
solution1
2 2017-10-04 16:28:34
You are doing a strict comparison === so 1 does not equal "1". Cast the input to a number eg
var input = Number(document.getElementById("input").value);
Also note that javascript array indexes are 0 based, so when you say the user enters "4" and you want the "fourth" element of the array, what you really want is array index 3, so
var input = Number(document.getElementById("input").value)-1;
solution2
2 2017-10-04 16:29:18
You just need to use your input value as an index.
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.`;
}
}
solution3
1 2017-10-04 16:26:47
Actually you don't need to use this for loop and the if check(which is the cause of the problem here as you are using === to compare a string with a Number ).
You just need:
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>
solution4
1 2017-10-04 16:34:12
A couple things - Your first line isn't actually calling your showDays when the window loads. Change it like so to correctly bind your click handler:
window.onload = showDays; -> window.onload = showDays();
Then you can greatly simplify your selectMonth option by making sure you have input from the user as an integer, and that the integer in the correct range. Then you can use that input directly as your index:
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;
}
Example here:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.