JavaScript外部文件访问html元素并赋值给变量

Question

我开始学习JavaScript，但不明白为什么在外部JavaScript函数中无法将HTML属性描述分配给变量。在HTML页面内部时可以正常工作，但在外部脚本中将要分配的变量测试结果为未定义。

function NewFunction() {

  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
 document.getElementById("demo").innerHTML = x;

如果我使用变量x="hello"，我可以更改演示文稿。但是，如果我尝试将x分配给document.getElementById("Year").href，它会报告未定义。这段代码在源页面中作为本地脚本很好地工作。

我似乎遗漏了某些东西，因为它似乎无法将从HTML页面读取的信息分配给变量。

我错过了什么？ 谢谢

- domenico fusco

---

它应该可以正常工作，你能否设置一个JSfiddle或展示你相关的HTML和完整的JS代码？ - user6269864

必须向所有人道歉。 - domenico fusco

Answer 1

脚本加载时可能存在的问题应该是时间节点。当DOM准备好之后再调用您的函数（有关详细信息，请参见事件DOMContentLoaded）。

document.addEventListener("DOMContentLoaded", function(event) { 
  NewFunction()
});

Below is your code ( with func calling on DOM Ready ) and everything seems to work fine. Try to compare with our actual code.

function NewFunction() {
  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
 document.getElementById("demo").innerHTML = x;
};
document.addEventListener("DOMContentLoaded", function(event) { 
  NewFunction()
});

<a href='123' id='Year'>123</a>

<p id='demo'>123</p>

Good Luck !

- Andriy Ivaneyko

---

是的，当它嵌入到HTML页面中时，它可以很好地工作。但是我正在从外部JavaScript文件中调用它，该文件在页面加载后通过按钮单击激活。我可能无法在外部js代码中分配HTML元素，但我可以通过代码修改页面，这就是我不理解的地方。 - domenico fusco

必须向所有人道歉。我重新检查了HTML代码，没有意识到我引用的元素在元素中没有href，因为我正在查看下一个项目。实际上我引用的项目有一个src，一旦我将其更改为var x = document.getElementById（“Year”）.src；代码就会按照预期工作。我很抱歉并感谢您的帮助，我学到了很多，并且我会更加小心我的帖子。 - domenico fusco

Answer 2

你需要将 <script> 标签放在 body 结束标签前，或者在 load 或 DOMContentLoaded 监听器中执行你的函数。

- Qwertiy

Answer 3

你的 JavaScript 代码很可能在 DOM（HTML 页面）加载之前就运行了。你需要将代码包裹在一个 onload 函数中：

window.onload = function() {
  var x = document.getElementById("Year").href;
  //var x="hello"
  if (x === undefined) {
      alert("x is undefined");
  } else {
      alert("x is defined");
  }
  document.getElementById("demo").innerHTML = x;
};

- Wikiti

---

页面加载完成后，我通过网页上的按钮调用该函数。 - domenico fusco

你能展示一下你的HTML代码吗？ - Wikiti