id = "leftSide"内のdivに画像を表示するにはどうすればよいですか？

は現在Coursera割り当ての途中ですが、画像を表示するためにleftSide divを取得できません。id = "leftSide"内のdivに画像を表示するにはどうすればよいですか？

誰かが私のコードに間違っていることを親切にアドバイスできますか？ありがとうございました！

<DOCTYPE! html> 
<html> 
<head> 
<title>Matching Game - Smiling :)</title> 
<style> 
    div, img {position: absolute;} 
    div {width: 500px; height: 500px;} 
    #rightSide {left: 500px; border-left: 1px solid black} 
</style> 
<script type="text/javascript"> 
    var numberOfFace = 5; 
    var theLeftSide = document.getElementById('leftSide'); 
    var top_random = (Math.random() * 400); 
    var left_random = (Math.random() * 400); 
    var count = 0 

    function generateFaces() { 
     var smiling_face = document.createElement("img"); 
     document.getElementsByTagName("img").src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
     img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
     smiling_face.style.top = Math.floor(top_random); 
     smiling_face.style.left = Math.floor(left_random); 

     while (count < numberOfFace) { 
      theLeftSide.appendChild(smiling_face); 
      count = count ++; 
     } 
    } 
    </script> 
</head> 

<body onload="generateFaces()"> 
    <h1>Matching Game</h1> 
    <p>Click on the extra smiling face on the right!</p> 
    <div id="leftSide"></div> 
    <div id="rightSide"></div> 
</body> 
</html>

出典

2016-09-26 Shane Low

定義されていないような 'img'変数は何ですか？ – callback

コードには複数の問題があり、正しく動作しないので、どの種類あなたが達成したい成果の

しかし、私が見つけた、少なくとも以下のような問題点：

img変数が定義されることはありません - とsmiling_faceであることが必要ではなく...これはおそらくタイプミスです。
smiling_faceは関数ループの最後に配置されるため、document.getElementsByTagName("img").src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"の入力は不要です。
top_randomとleft_randomがgenerateFaces()外で定義されたので、彼らは常に同じ値を持っている...それはあなたが出力5笑顔の顔にしたいと思われるので、あなたはgenerateFaces()関数の内部でそれらを定義したする必要があります。
smiling_face.style.top = Math.floor(top_random);として絶対位置を与えるのは間違っています。ピクセル値も指定する必要があります。そうです：Math.floor(top_random) + "px";同じことがstyle.leftに適用されます...countの
増加値は、それらの変更後count++;

として行うことができます、あなたはdiv要素のランダム化された位置に5枚のスマイリー画像を作成する作業例を持っています。

ここにはJSFIDDLEの例があります。また、以下の

関連するコード：

HTML：

<h1>Matching Game</h1> 
<p>Click on the extra smiling face on the right!</p> 
<div id="leftSide"></div> 
<div id="rightSide"></div>

CSS：

div, img {position: absolute;} 
div {width: 500px; height: 500px;} 
#rightSide {left: 500px; border-left: 1px solid black}

はJavaScript：

var numberOfFace = 5; 
var count = 0; 

function generateFaces() { 
    var theLeftSide = document.getElementById('leftSide'); 

    while (count < numberOfFace) { 
     var top_random = (Math.random() * 400); 
     var left_random = (Math.random() * 400); 
     var smiling_face = document.createElement("img"); 

     smiling_face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" 
     smiling_face.style.top = Math.floor(top_random) + "px"; 
     smiling_face.style.left = Math.floor(left_random) + "px"; 
     theLeftSide.appendChild(smiling_face); 

     count++; 
    } 
} 

generateFaces();

注：私はこの方法をトリガの例として、ここではgenerateFaces();コールを使用していても

。 <body onload="generateFaces()">を既に使用しているように使用して、ページの頭の部分にjavascriptを置いておくことができます。しかし、閉じたbodyタグの前にjavascriptを置くことがよくあります。 - HTMLパーサーは、ドキュメントの残りの部分をレンダリングする前に外部スクリプトがダウンロードされるのを待つ必要があるため、頭に置くと初期ページのレンダリングが遅くなるためです。ただし、 asyncキーワードを使用すると、スクリプトがブロック動作を取り除くため、スクリプトを頭に置くことができます。これについて詳しくは、 BlockingJS

乾杯してください。

出典

2016-09-26 13:20:03

こんにちは、あなたの詳細な説明に感謝します。私はコードを修正し、今すぐ動作します。好奇心が強いのですが、bodyタグを閉じる前にjavascriptを置くのがなぜ好まれるのですか？ –

@ShaneLow私は私の答えでそれを説明しようとしました。 HTMLはトップダウンで解析されます。これは、JavaScriptが最初に処理された後、残りのHTMLが処理されることを意味します。つまり、まだ解析されていないHTMLを参照すると、JavaScriptにエラーが発生します。 jQueryは、「DOMの待機」コマンドを与えることで、これを一番上に置くことが容易になりました。ページが最初にロードされ、JavaScriptが実行されます。基礎となるパーサ/プロセスがどのように機能するかについて、Courseraの資料を詳しく調べることをお勧めします。 – zerohero

@ShaneLow頭に置くと最初のページのレンダリングが遅くなるため、底に配置する必要があります。私は自分の答えを更新し、最後のノートを最後に読んだ。 –

-1

次の行を削除します。

img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

出典

2016-09-26 13:12:35 callback

彼のコードでもっと間違っている、私の答えを参照してください – zerohero

IMGが定義されていないが、そうコメントアウトするかという行を削除：

img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

間違っている他のものがあるがあなたのJavaScriptが最初に実行される（ページがレンダリングされるのを待たずに）、DIVを参照しようとしているときに "Object not found"参照エラーが発生するまだ完全に忘れられていない。

JavaScriptをページの下に移動すると、この問題は解決します。

次にあなたが持っている別の問題は、これがちょうどあるべき

count = count++;

です：

count++;

あなたはすべてのことを解決したら、あなたはイメージがまだロードされないことがわかります：

document.getElementsByTagName("img").src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

は次のようになります。

smiling_face.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

document.getElementsByTagName（ "img"）が機能しない理由は、「smiling_face」をDOMに追加するためにまだ「.appendChild」を使用していないためです。 DOMにはまだ "img"要素が定義されていないため、決して発射/動作しません。だからあなたは既に作成した "smiling_face"要素を使う必要があります（img.srcがあったと思います）

出典

2016-09-26 13:14:56 zerohero

答えの最後の2行は同等です。 – callback

@コールバックいいえそうではありません。 document.getElementsByTagNameはappendChildをまだ使用していないので何もしないので、DOMは彼が何を言っているか分かりません。彼はすでにイメージ要素として "smiling_face"を追加しているので、オブジェクトのソースを定義することは、実行中のものよりも優れています。コードをコピー＆ペーストしてブラウザに表示し、参照してください。あなたとシェーンは、JavaScriptのレンダリング方法やこれらのコマンドが意味するものについてはほとんど分かりません – zerohero

id = "leftSide"内のdivに画像を表示するにはどうすればよいですか？

答えて

関連する問題