Question

目前正处于Coursera作业的中间，但无法获得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>

Answer 1

代码存在多个问题......并且因为它无法正常工作，很难猜出你想要实现哪种结果。

但我发现至少有以下问题：

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++;

在这些变化之后，你将有一个工作的例子，可以为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保留在页面的head部分。但是，通常首选将javascript放在结束体标记之前。 - 因为将其放在头部会降低初始页面呈现速度，因为HTML解析器需要等待外部脚本下载才能呈现文档的其余部分。但是，使用 async 关键字允许仍然放置脚本，因为它会删除阻止行为。您可以从此处了解更多相关信息：BlockingJS

干杯。

Answer 2

img未定义，因此请注释掉或删除说明的行：

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

另一个错误是你的JavaScript首先运行（不等待页面渲染），导致找不到＆＃34;对象＃34;您尝试引用DIV时引用错误，因为DOM还没有完全加载。

将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（＆＃34; img＆＃34;）之所以不起作用，是因为你还没有使用＆＃34; .appendChild＆＃34;尚未添加＆＃34; smiling_face＆＃34;到DOM。因为没有＆＃34; img＆＃34;在DOM中定义的元素，永远不会触发/工作。所以你必须使用＆＃34; smiling_face＆＃34;你已经创建的元素（我认为img.src来自）

Answer 3

删除以下行：

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

如何在id =＆＃34; leftSide＆＃34;？

3 个答案: