使用javascript隨機將圖片放在div上

我正在進行匹配遊戲，左右圖像不同，用戶必須找到（我在左側放置了一張圖像）。我的問題是，我無法在所需的位置調用圖像。我該怎麼解決？謝謝。使用javascript隨機將圖片放在div上

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    img { 
     position: absolute; 
    } 
    div { 
     position: absolute; 
     width: 500px; 
     height: 500px; 
    } 
    #leftside { 
     float: left; 
    } 
    #rightside { 
     float: right; 
     left: 500px; 
     border-left: 1px solid black 
    } 
    </style> 
    <script> 
    var numberOfFaces(5); 
    var theLeftSide = document.getElementById("leftSide"); 

    function generateFaces() { 
     var createElement("img"); 
     var position = Math.floor(Math.random() * 500); 
     img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png'; 
     img.id = 'smileImage'; 
     createElement.setAttribute("height", position); 
     createElement.setAttribute("width", position); 
     document.getElementById('leftSide').appendChild(img); 
    } 
    </script> 
</head> 

<body> 
    <h1>Matching Game</h1> 
    <p>Click on the extra smiling face on the left.</p> 
    <div id="leftside"></div> 
    <div id="rightside"></div> 
</body> 

</html>

來源

2016-01-24 jaykodeveloper

心靈澄清你的意思是什麼 – BalinKingOfMoria

你需要設置一些東西到createElement('img')的結果。例如，您可以將該行更改爲var img = createElement('img');

您從未實際使用過theLeftSide。

createElement實際上是document.createElement。您從未定義變量createElement。由於我們早些時候稱它爲img，現在就這樣做。

leftSide不是任何元素的ID，但leftside是。改變它，使所有的用法都大寫相同。

之後，您實際上需要撥打generateFaces。由於該頁面是從上到下加載的，JavaScript尚不知道div的ID爲leftSide。您必須等待頁面完成加載才能調用Javascript，並且您可以通過將window.onload = generateFaces添加到腳本的末尾來完成此操作。

下面是最終的結果：「來電圖像」

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    img { 
 
     position: absolute; 
 
    } 
 
    div { 
 
     position: absolute; 
 
     width: 500px; 
 
     height: 500px; 
 
    } 
 
    #leftside { 
 
     float: left; 
 
    } 
 
    #rightside { 
 
     float: right; 
 
     left: 500px; 
 
     border-left: 1px solid black 
 
    } 
 
    </style> 
 
    <script> 
 
    function generateFaces() { 
 
     var img = document.createElement('img'); 
 
     var position = Math.floor(Math.random() * 500); 
 
     img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png'; 
 
     img.id = 'smileImage'; 
 
     img.setAttribute('height', position); 
 
     img.setAttribute('width', position); 
 
     document.getElementById('leftSide').appendChild(img); 
 
    } 
 
    window.onload = generateFaces; 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <h1>Matching Game</h1> 
 
    <p>Click on the extra smiling face on the left.</p> 
 
    <div id="leftSide"></div> 
 
    <div id="rightSide"></div> 
 
</body> 
 

 
</html>

來源

2016-01-24 01:21:06 BalinKingOfMoria

我只注意到這個小錯誤在編碼方面可能會發生很大的變化。感謝您的出色建議。我還有一個問題就是它的立場。正如你在我的代碼中看到的那樣，我的位置是可變的，但似乎我是因爲它的大小而變化的。你能告訴我如何設置其位置（位置？）謝謝！ – jaykodeveloper

不幸的是，我不知道有足夠的CSS來幫助，所以我會問一個新問題。出於好奇，JavaScript是你的第一語言還是來自C++背景？ – BalinKingOfMoria

我真的很新手，但對Java有一點認識。我很感謝你的回答。我現在試圖把隨機位置爲我的形象，而不是隨機大小lol – jaykodeveloper

使用javascript隨機將圖片放在div上

回答

相關問題