2017-11-11 225 views
-4

一直在尋找通過我的教科書來試圖找出我做錯了什麼,但到目前爲止我什麼也沒找到(這是一個Javascript單元一個HTML/CSS書。)我試過評論除了新的Date()之外的所有內容。但是這並沒有出現在HTML頁面上。我已經絕對確定這些文件位於同一個文件夾中,並且JavaScript文件確實出現在具有HTML的開發人員工具中,但是當我加載HTML頁面時,HTML會顯示,但代替頁面上的Javascript說null ..可以有更多的經驗,在Javascript的人能夠指出什麼是使代碼返回null?一切都是全球性的,因爲這個任務並沒有要求功能,我應該把它放在一個函數中嗎?我的Javascript代碼回來爲空,我不知道爲什麼

該代碼應該顯示今天的日期,然後根據該日期顯示一個地圖,根據它在一年中的什麼日期和時間。

任何幫助,非常感謝。 。

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( 「星座圖」)insertAdjacentHTML( 'beforebegin',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

'innerhtml' =>'innerHTML',和你究竟會發生什麼'document.getElementById(「'」);'要做什麼? –

+0

我看不到返回任何*的代碼。 –

+0

'var imgStr ='';' – Andy

回答

1

的問題是就行:

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

功能的getElementById期望您要檢索的元素的ID,您擁有的是圖像標記的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取代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> 
+0

這就是所有的Javascript,圖像仍然沒有出現。我把這個放在我的HTML中 現在我的HTML會發布在問題中。 – Nyako

+0

請參考https://www.w3schools.com/jsref/met_document_createelement.asp尋求幫助,您將需要使用document.createElement創建帶有sd_sky id + mapNum的HTML,然後將其附加到您的文檔中。 – SPlatten

+0

我將編輯我的答案以反映您的編輯。 – SPlatten

相關問題