一直在浏览我的教科书,试图弄清楚我做错了什么,但到目前为止我一无所获(这是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>°</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 © 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>
答案 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>°</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 © 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>