私の画像の位置がランダムに配置されていないのはなぜですか？

-1

私はマッチングゲームを作ろうとしています。左手側と右手側がランダムに配置されています。正常に動作しているrandom関数（console.logを使用してチェック）を使用した後でも、私の画像は線で表示されます（ランダムに表示されません）。私はJavaScript、CSSとHTMLコードスニペットを以下に書かれている私の画像の位置がランダムに配置されていないのはなぜですか？

....

var numberOfFaces=5; 
 
var theLeftSide=document.getElementById("leftSide"); 
 
var imgHeight=80; 
 
var imgWidth=80; 
 

 
function generateFaces(){ 
 

 
while(numberOfFaces>0){ 
 
var smileImg=document.createElement("img"); 
 

 
smileImg.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
 
smileImg.style.height=imgHeight + "px"; 
 
smileImg.style.width=imgWidth + "px"; 
 
var randomTop=Math.random() * 400; 
 
randomTop=Math.floor(randomTop); 
 
console.log(randomTop); 
 
var randomLeft=Math.random() * 500; 
 
randomLeft=Math.floor(randomLeft); 
 
console.log(randomLeft); 
 
smileImg.style.top= randomTop + "px"; 
 
smileImg.style.left=randomLeft + "px"; 
 
leftSide.appendChild(smileImg); 
 
numberOfFaces--; 
 
} 
 

 
}

body{ 
 
margin:50px; 
 

 
} 
 
p{ 
 
text-align:center; 
 
font-size:18px; 
 
} 
 

 
#outer{ 
 
border:0.5px solid black; 
 
position:realtive; 
 
height:500px; 
 
margin:20px; 
 
} 
 

 

 
#rightSide,#leftSide{ 
 
width:500px; 
 
height:500px; 
 
position:absolute; 
 
} 
 

 
#rightSide{ 
 
left:700px; 
 
border-left:2px solid black; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" /> 
 
<script type="text/javascript" src="MatchingGame.js" ></script> 
 
<title>Matching Game</title> 
 
</head> 
 
<body onload="generateFaces()"> 
 
<p>Click on the extra smiling face on the left side.</p> 
 
<div id="outer"> 
 
<div id="leftSide"></div> 
 
<div id="rightSide"></div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-02-05 Isha Goyal

トピックをオフ：あなたのJS内の 'leftSide'と' theLeftSide'をチェックしてください。 – Thomas

@Thomas：Nice catch。 Isha、なぜそれがエラーではないのだろうと思っているのであれば、ブラウザがIDを持つ要素の自動グローバル変数を作成するからです。変数名はIDで、値は要素への参照です'getElementById'）。しかし、それに頼らない理由があります。しかし、それが失敗していない理由です。 –

@トーマス：私の愚かな間違いを指摘してくれてありがとう... –

ため、デフォルトでは、img要素は、inlineであるので、そのleft、top、rightbottomは無視されます。

要素を配置する場合は、position: absoluteなどの他の表示モードのいずれかを使用して、オフセットコンテナに対して絶対的に配置します。（あなたのケースでは、オフセットコンテナが#leftSideです。）おそらく、このルールに：

#leftSide img { 
    position: absolute; 
}

例：私はscriptタグを移動していることも

var numberOfFaces=5; 
 
var theLeftSide=document.getElementById("leftSide"); 
 
var imgHeight=80; 
 
var imgWidth=80; 
 

 
function generateFaces(){ 
 

 
while(numberOfFaces>0){ 
 
var smileImg=document.createElement("img"); 
 

 
smileImg.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; 
 
smileImg.style.height=imgHeight + "px"; 
 
smileImg.style.width=imgWidth + "px"; 
 
var randomTop=Math.random() * 400; 
 
randomTop=Math.floor(randomTop); 
 
console.log(randomTop); 
 
var randomLeft=Math.random() * 500; 
 
randomLeft=Math.floor(randomLeft); 
 
console.log(randomLeft); 
 
smileImg.style.top= randomTop + "px"; 
 
smileImg.style.left=randomLeft + "px"; 
 
leftSide.appendChild(smileImg); 
 
numberOfFaces--; 
 
} 
 

 
}

body{ 
 
margin:50px; 
 

 
} 
 
p{ 
 
text-align:center; 
 
font-size:18px; 
 
} 
 

 
#outer{ 
 
border:0.5px solid black; 
 
position:realtive; 
 
height:500px; 
 
margin:20px; 
 
} 
 

 

 
#rightSide,#leftSide{ 
 
width:500px; 
 
height:500px; 
 
position:absolute; 
 
} 
 

 
#rightSide{ 
 
left:700px; 
 
border-left:2px solid black; 
 
} 
 

 
#leftSide img { 
 
    position: absolute; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" /> 
 
<title>Matching Game</title> 
 
</head> 
 
<body onload="generateFaces()"> 
 
<p>Click on the extra smiling face on the left side.</p> 
 
<div id="outer"> 
 
<div id="leftSide"></div> 
 
<div id="rightSide"></div> 
 
</div> 
 
<script type="text/javascript" src="MatchingGame.js" ></script> 
 
</body> 
 
</html>

注意文書の末尾まで、の終了直前までタグ。どこにあったのか（最上部）、それはあまりにも早く実行され、getElementByIdで検索しようとする要素が作成されるので、var theLeftSide = document.getElementById("leftSide");はnullを返します。しかし最後に、要素が作成され、要素が返されます。

出典

2017-02-05 11:48:04

私の画像の位置がランダムに配置されていないのはなぜですか？

答えて

関連する問題