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 获取 ID 之前，您需要定义 id 为 id 的 html 元素。 getElementById("id")，这似乎是代码唯一的问题。

脚本内容在前，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>