2017-11-11 10 views
-4

私のテキストブックを見て、私が間違っていたことを理解しようとしましたが、これまでに何も見つかりませんでした(これはJavascript単位ですHTML/CSSの本。)私は新しいDate()を除いてすべてをコメントアウトしようとしました。 HTMLページには表示されません。私は、ファイルが同じフォルダにあることを絶対に確信しています、そして、javascriptファイルはHTMLの開発者ツールに表示されますが、HTMLページを読み込むとHTMLが表示されますが、ページ上のJavascriptの代わりに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( "星座早見盤")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

* anything *を返すコードはありません。 –

+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

関連する問題