javascript：从学生 ID 输出姓名的最简单方法

Question

我的JS代码

<script language="Javascript">
var data = {
   7: "Jack Black",
   8: "John Smith"
};

var id = document.getElementById("id"),
  emp = document.getElementById("name");
id.addEventListener("keyup", function() {
  emp.value = data[this.value] || "No name with this ID Number";
});
</script>

在 HTML 中我有

<input type="number" id="id" />
<input type="text" disabled="disabled" id="name" />

那么我做错了什么，为什么当我输入 7 时，Jack Black 没有出现在文本框中？

非常感谢

Answer 1

问题一定出在 html 文件中 script 标签的位置，在使用 javascript 使用document.getElementById("id")获取 ID 之前，您需要定义 id 为id的 html 元素，这似乎是唯一的代码的问题。

脚本内容在先，html 在后，导致错误

 <script language="Javascript"> var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); id.addEventListener("keyup", function() { emp.value = data[this.value] || "No name with this ID Number"; }); </script> <input type="number" id="id" /> <input type="text" disabled="disabled" id="name" />

如果我们颠倒顺序，先定义html，再定义脚本，就没有错误了！

 <input type="number" id="id" /> <input type="text" disabled="disabled" id="name" /> <script language="Javascript"> var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); id.addEventListener("keyup", function() { emp.value = data[this.value] || "No name with this ID Number"; }); </script>

Answer 2

您的代码有效！ 但是如果您想使用数字输入的箭头，请使用更改事件。

 // maybe it would be better to make an array var data = { 7: "Jack Black", 8: "John Smith" }; var id = document.getElementById("id"), emp = document.getElementById("name"); function changeValue() { emp.value = data[this.value] || "No name with this ID Number"; } // event listener if (id.addEventListener) { // new browsers id.addEventListener("keyup", changeValue, false); id.addEventListener("change", changeValue, false); } else if (id.attachEvent) { // IE <9, Opera <6 id.attachEvent("onkeyup", fchangeValue); id.attachEvent("onchange", fchangeValue); } else { // old browsers id.onkeyup = changeValue; id.onchange = changeValue; }

 <input type="number" id="id" /> <input type="text" disabled="disabled" id="name" />