Question

我想将用户输入与数组进行比较 示例：如果用户在输入字段中写入4，则应该向我们显示31，即数组中第4个元素的值。

我的代码中出错了什么？

＆＃13;

<!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>

＆＃13;

Answer 1

您正在进行严格的比较===，因此1不等于“1”。将输入转换为数字，例如

var input = Number(document.getElementById("input").value);

另请注意，javascript数组索引是基于0的，所以当你说用户输入“4”而你想要数组的“第四”元素时，你真正想要的是数组索引3，所以

  var input = Number(document.getElementById("input").value)-1;

Answer 2

您只需使用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.`;
        }
}

Answer 3

实际上，您不需要使用此for循环和if检查（这是问题的原因，因为您使用===来比较{ {1}} string}。

你只需要：

Number

＆＃13;

function selectMonth() {
       var input = document.getElementById("input").value;
       var index = parseInt(input);
       if(input<months.length)
          document.getElementById("print").innerHTML = months[index-1];
       }
   //
}

＆＃13;

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];
}

＆＃13;

Answer 4

一些事情 - 当窗口加载时，你的第一行实际上并没有调用你的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>

如何将用户输入与数组进行比较

4 个答案: