document.getElementbyId in Javascript

document.getElementbyId in Javascript

本文关键字：Javascript in getElementbyId document      更新时间：2023-09-26

我对Web开发相当陌生，最近开始制作自己的网站。我正在尝试在我的代码中添加导航菜单，但根据 Chrome 调试器，document.getElementbyId 调用返回 null。有人可以告诉我，为什么菜单没有显示。我尝试了 4 种不同的浏览器。这是Javascript代码：

document.getElementById("foot").innerHTML = "<p>&copy;"+ "All rights reserved. </p>";
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>Home</a></li>" +
"<li><a href='About.html'>About</a></li>" +
"</ul>"; 
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='Index.html'>Home</a></li>" +
"<li><a href='Customers.html'>Data</a></li>" +
"<li><a href='About.html'>About</a></li>" +
"</ul>";

以下是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title> My Website</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
    <div id = "main">
    <h2> Webpage</h2>

  <p>Pages (HTML)</p>
  <p>Style Sheets (CSS)</p>
  <p>Computer Code (JavaScript)</p>
  <p>Live Data (Files and Databases)</p>

    <footer id ="foot01"></footer>
    </div>
    <script src="Script.js"></script>
</body>
</html>

document.getElementById("foot")找不到任何匹配项，因为没有"foot"id。相反，在您的HTML代码中，您使用"foot01"，因此请尝试使用它！

document.getElementById("foot").innerHTML // you have mentioned Id as foot here

但似乎你已经<footer id ="foot01"></footer>

将 id 更改为英尺，或使用使用的 id 获取元素，即 foot01，它将起作用

修复了收到评论后的其他问题

问题：

  1. 缺少字符集
  2. 文档未加载，并且脚本在文档完全加载之前加载

.

（阅读 javascript 中的 onload 方法）以及它如何因浏览器而异

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8">
     <title> My Website</title>
     <link href="Site.css" rel="stylesheet">
     <script>
         function load() {
            document.getElementById("foot01").innerHTML = "<p>&copy;"+ "All rights reserved. </p>";
            document.getElementById("nav01").innerHTML =
                       "<ul id='menu'>" +
                       "<li><a href='Index.html'>Home</a></li>" +
                       "<li><a href='About.html'>About</a></li>" +
                       "</ul>"; 
            document.getElementById("nav01").innerHTML =
                       "<ul id='menu'>" +
                       "<li><a href='Index.html'>Home</a></li>" +
                       "<li><a href='Customers.html'>Data</a></li>" +
                       "<li><a href='About.html'>About</a></li>" +
                       "</ul>";
          }
      </script
   </head>
   <body onload="load()">
       <nav id="nav01"></nav>
       <div id = "main">
          <h2> Webpage</h2>
          <p>Pages (HTML)</p>
          <p>Style Sheets (CSS)</p>
          <p>Computer Code (JavaScript)</p>
          <p>Live Data (Files and Databases)</p>
          <footer id="foot01"></footer>
       </div>
    <script src="Script.js"></script>
    </body>
</html>
相关文章：