CODEWITHSUNDEEP
javascriptarrays
Sander Hellesø
Sander Hellesø

Reputation: 271

How can i compare user input to an array

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>

Upvotes: 0

Views: 1421

Answers (4)

Mateo Guzm&#225;n
Mateo Guzm&#225;n

Reputation: 1356

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.`;
        }
}

Upvotes: 2

Ben
Ben

Reputation: 5626

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>

Upvotes: 1

CrayonViolent
CrayonViolent

Reputation: 32517

You are doing a strict comparison === so 1 does not equal "1". Cast the input to a number e.g. 

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;

Upvotes: 3

cнŝdk
cнŝdk

Reputation: 32145

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>

Upvotes: 1

Related Questions