如何在id =「leftSide」內的div中顯示圖像？

當前處於Coursera作業的中間，但無法獲得左側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代替。這可能是一個錯字。
不需要鍵入document.getElementsByTagName("img").src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"，因爲smiling_face將在函數循環結束時放置到DOM。
top_random和left_random定義在generateFaces()之外，因此它們總是具有相同的值。因爲看起來您想要輸出5個笑臉，您需要在generateFaces()函數內定義它們。
絕對位置爲smiling_face.style.top = Math.floor(top_random);是錯誤的..你也應該指定像素值..所以它變成：Math.floor(top_random) + "px";同樣適用於style.left ...
增加count值可以做到count++;

這些變化後，你將有5個創建笑臉圖像一個div的隨機位置的工作示例。

這裏是一個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保留在頁面的頭部。但是，通常最好將javascript放在關閉body標籤之前。 - 因爲將它放在頭上會減慢初始頁面的渲染速度，因爲HTML解析器需要等待外部腳本下載才能下載文檔的其餘部分。但是，使用異步關鍵字仍然可以放置腳本，因爲它可以消除阻塞行爲。您可以從這裏閱讀更多關於此的信息：BlockingJS

乾杯。

來源

2016-09-26 13:20:03

嗨Mauno，謝謝你的詳細解釋。我修復了代碼，它現在可以工作。只是好奇，但爲什麼通常更喜歡在關閉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時，因爲DOM沒有l完全承諾。

將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」）不起作用的原因是因爲您尚未使用「.appendChild」尚未將「smiling_face」添加到DOM。因爲在DOM中沒有定義「img」元素，所以永遠不會開火/工作。所以你必須使用你已經創建的「smiling_face」元素（我認爲img.src來自於）

來源

2016-09-26 13:14:56 zerohero

答案的最後兩行是相同的。 – callback

@callback不，它不是。 document.getElementsByTagName不做任何事情，因爲他還沒有使用appendChild，所以DOM不知道他在說什麼。他還將「smiling_face」添加爲圖像元素，因此定義該對象的源比他正在運行的不存在的更好。複製並粘貼他的代碼並在瀏覽器中運行並查看。你和Shane都不太瞭解JavaScript呈現方式或這些命令的意思 – zerohero

如何在id =「leftSide」內的div中顯示圖像？

回答

相關問題