Question

我开始使用JavaScript，我无法理解为什么我不能将HTML属性描述分配给外部JavaScript函数中的变量。它在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;

如果我使用var x =“hello”，我可以更改演示。但是，如果我尝试分配 x document.getElementById（“Year”）。href它报告为未定义。此代码在源页面内作为本地脚本运行良好。

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

我错过了什么？感谢

Answer 1

加载脚本的时刻可能存在问题。只需在DOM准备就绪时调用您的函数（有关详细信息，请参阅事件DOMContentLoaded）。

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

以下是您的代码（使用func调用DOM Ready），一切似乎都正常。尝试与我们的实际代码进行比较。

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>

祝你好运！

Answer 2

您必须将<script>标记放在正文的末尾，或者在load或DOMContentLoaded听众中执行您的功能。

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

外部JavaScript访问html元素并分配给变量

3 个答案: