javascript: 从学号输出姓名的最简单方法

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文件中的位置，你需要在使用[=36=之前定义id为id的html元素] 使用 document.getElementById("id") 获取 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>

Answer 2

您的代码有效！但是，如果您想使用数字输入的箭头，请使用 change-event。

// 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" />

javascript: 从学号输出姓名的最简单方法

javascript: easiest way to output names from student ID

html

javascript

lookup

numbers