我的Javascript代码将返回null,我无法弄清楚原因

时间:2017-11-11 15:58:02

标签: javascript

一直在浏览我的教科书,试图弄清楚我做错了什么,但到目前为止我一无所获(这是HTML / CSS书中的Javascript单元。)我试过评论除了新的Date()之外的一切;行但但没有出现在HTML页面上。我已经确定文件位于同一文件夹中,并且javascript文件确实出现在带有HTML的开发人员工具中,但是当我加载HTML页面时,HTML显示但代替页面上的Javascript它只是说null ..有更多Javascript经验的人能够指出是什么让代码返回null吗?一切都是全局的,因为赋值不要求函数,我应该把它放在函数中吗?

代码应显示今天的日期,然后根据该日期,根据当年的日期和时间显示地图。

非常感谢任何帮助。

var thisTime = new Date();
var thisStr = thisTime.toLocaleString();
document.getElementById("timeStamp").innerhtml = thisStr;
var thisHour = thisTime.getHours();
var thisMonth = thisTime.getMonth();
var mapNum = (thisMonth * 2 + thisHour) % 24;
var imgStr = document.getElementById("<img src= 'sd_sky'+ mapNum + '.png'></img>'");

document.getElementById(&#34; planisphere&#34;)。insertAdjacentHTML(&#39; beforebegin&#39;,imgStr);

编辑:感谢你们,我能够通过在innerHTML中利用HTML来修复我的代码,并使用它来定义我的imgStr并让它显示正确的图像:

var imgStr = document.createElement("img");
imgStr.src =('sd_sky' + mapNum + '.png');
document.getElementById("planisphere").appendChild(imgStr);

HTML

<meta charset="utf-8" />
   <title>Star Dust Stories: Using a Planisphere</title>
   <link href="sd_base.css" rel="stylesheet" />
   <link href="sd_layout.css" rel="stylesheet" />
   <script src="sd_mapper.js" defer></script>
</head>

<body>
   <header>
      <nav class="horizontal">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Astronomers</a></li>
            <li><a href="#">Moons</a></li>
            <li><a href="#">Planets</a></li>
            <li><a href="#">Stars</a></li>
            <li><a href="#">Physics</a></li>
         </ul>
      </nav>
      <img src="sd_logo.png" alt="SkyWeb" />
   </header>
   <section id="left">
      <article>
         <h1>The Planisphere</h1>
         <p>A <strong>planisphere</strong> is a visual aid to astronomers and stargazers. 
            It consists of two disks: One displays all of the visible 
            constellations in the night sky, and the other covers the first 
            and contains a window that indicates the portion of the sky currently 
            visible. The second disk is then rotated to match the current date and 
            time. Planispheres come in a variety of sizes and types. The important 
            thing to remember is that you must have a planisphere that matches 
            the longitude of your stargazing location.
         </p>
         <p>On the right is an online planisphere. It consists of two images laid on
            top of one another. The top image is the viewing disk of the planisphere. The
            bottom image contains the sky map. This planisphere is 
            automatically rotated for you, displaying the current date and time 
            and visible constellations for observers at a longitude of 
            40<sup>&deg;</sup> North. To use a planisphere, hold directly overhead with
            the arrow facing north as indicated on the viewing disk.</p>
      </article>
   </section>
   <section id="right">
      <div id="planisphere">   
         <img id="mask" src="sd_mask.png" alt="" />      
         <div id="timeStamp">March 1, 2018 4:53 PM</div>
         <img src= "sd_sky"></img>
      </div> 
   </section>
   <footer>
      Star Dust Stories &copy; 2018 English (US) <span><a href="#">About</a>
      <a href="#">Developers</a> <a href="#">Privacy</a> 
      <a href="#">Terms</a> <a href="#">Help</a></span>
   </footer>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

问题在于:

    var imgStr = document.getElementById("<img src= 'sd_sky'+ mapNum + '.png'></img>'");

函数getElementByID需要您要检索的元素的id,您拥有的是图像标记的HTML。

假设您的文档中包含此HTML,请将HTML替换为“id_sky”

var thisTime = new Date();
var thisStr = thisTime.toLocaleString();
document.getElementById("timeStamp").innerHTML = thisStr;
var thisHour = thisTime.getHours();
var thisMonth = thisTime.getMonth();
var mapNum = (thisMonth * 2 + thisHour) % 24;
var imgStr = document.getElementById("sd_sky");
document.getElementById("planisphere").insertAdjacentHTML('beforebegin', imgStr);

HTML

<meta charset="utf-8" />
   <title>Star Dust Stories: Using a Planisphere</title>
   <link href="sd_base.css" rel="stylesheet" />
   <link href="sd_layout.css" rel="stylesheet" />
   <script src="sd_mapper.js" defer></script>
</head>

<body>
   <header>
      <nav class="horizontal">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Astronomers</a></li>
            <li><a href="#">Moons</a></li>
            <li><a href="#">Planets</a></li>
            <li><a href="#">Stars</a></li>
            <li><a href="#">Physics</a></li>
         </ul>
      </nav>
      <img src="sd_logo.png" alt="SkyWeb" />
   </header>
   <section id="left">
      <article>
         <h1>The Planisphere</h1>
         <p>A <strong>planisphere</strong> is a visual aid to astronomers and stargazers. 
            It consists of two disks: One displays all of the visible 
            constellations in the night sky, and the other covers the first 
            and contains a window that indicates the portion of the sky currently 
            visible. The second disk is then rotated to match the current date and 
            time. Planispheres come in a variety of sizes and types. The important 
            thing to remember is that you must have a planisphere that matches 
            the longitude of your stargazing location.
         </p>
         <p>On the right is an online planisphere. It consists of two images laid on
            top of one another. The top image is the viewing disk of the planisphere. The
            bottom image contains the sky map. This planisphere is 
            automatically rotated for you, displaying the current date and time 
            and visible constellations for observers at a longitude of 
            40<sup>&deg;</sup> North. To use a planisphere, hold directly overhead with
            the arrow facing north as indicated on the viewing disk.</p>
      </article>
   </section>
   <section id="right">
      <div id="planisphere">   
         <img id="mask" src="sd_mask.png" alt="" />      
         <div id="timeStamp">March 1, 2018 4:53 PM</div>
         <img src= "sd_sky"></img>
      </div> 
   </section>
   <footer>
      Star Dust Stories &copy; 2018 English (US) <span><a href="#">About</a>
      <a href="#">Developers</a> <a href="#">Privacy</a> 
      <a href="#">Terms</a> <a href="#">Help</a></span>
   </footer>
</body>
</html>