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

External JavaScript accessing html elements and assigning to a variable

本文关键字：变量 赋值 元素 JavaScript 访问 html 外部      更新时间：2023-09-26

我开始使用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;

我可以改变demo，如果我使用var x="hello"。但是如果我尝试分配x document.getElementById("年份")。Href返回的报告为未定义。这段代码作为本地脚本在源页面中运行良好。

我错过了一些东西，因为它似乎你不能分配一个变量，从HTML页面读取信息。

我错过了什么?由于

加载脚本时可能出现的问题。当DOM准备好时，只需调用您的函数(参见事件DOMContentLoaded获取更多信息)。

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

下面是你的代码(与DOM就绪函数调用)，一切似乎工作得很好。试着与我们的实际代码进行比较。

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>

祝你好运!

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

您的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;
};
相关文章：