如何在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中显示图像？

回答

相关问题