这是 HTML5 和 javascript 的浏览器问题吗？

Question

我在 Atom IDE 中编写 html 代码，但是当我尝试使用 Atom 的 HTML 预览时，我在浏览器上没有得到想要的结果, 我可以看到我想要得到的结果。

下面是浏览器和Atom预览的截图，请看一下：

我也尝试运行 Chrome 和 Internet Explorer 上的代码，我得到了相同的结果。

这也是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta name="author"  content="Carlos Cordova">
    <meta charset="utf-8">
    <title>Assessment 3 part 4 (Finishing the Game)</title>
    <style>

      img{
        position: absolute;
      }

      div{
        position: absolute;
        width: 500px;
        height: 500px;
      }

      #rightSide{
        left: 500px;
        border-left: 1px solid black;
      }

    </style>

    <script>
      var numberOfFaces = 5;

      function generateFaces(){
        for (var i = 0; i < numberOfFaces; i++) {
          var newImage = document.createElement("img");
          newImage.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
          newImage.style.top = Math.floor(Math.random()*400);
          newImage.style.left = Math.floor(Math.random()*400);
          theLeftSide = document.getElementById("leftSide");
          theLeftSide.appendChild(newImage);

          theRightSide = document.getElementById("rightSide");
          leftSideImages = theLeftSide.cloneNode(true);
          leftSideImages.removeChild(leftSideImages.lastChild);
          theRightSide.appendChild(leftSideImages);


          theBody = document.getElementsByTagName("body")[0];

          theLeftSide = document.getElementById("leftSide");

          theLeftSide.lastChild.onclick = function nextLevel(event){
            event.stopPropagation();
            numberOfFaces += 5;
            deleteAllChildren();
            generateFaces();
          };

          theBody.onclick = function gameOver(){
            alert("Sorry, your game is over!");
            theBody.onclick = null;
            theLeftSide.lastChild.onclick = null;
          };

          function deleteAllChildren(){
            theLeftSide = document.getElementById("leftSide");
            while(theLeftSide.firstChild){
              theLeftSide.removeChild(theLeftSide.firstChild);
            }
            theRightSide = document.getElementById("rightSide");
            while(theRightSide.firstChild){
              theRightSide.removeChild(theRightSide.firstChild);
            }
          }
        }
        /*console.log(theLeftSide.childNodes[0]);
        console.log(theLeftSide.childNodes[1]);
        console.log(theLeftSide.childNodes[2]);
        console.log(theLeftSide.childNodes[3]);
        console.log(theLeftSide.childNodes[4]);
        */
      }
    </script>

  </head>
  <body onload="generateFaces()">
    <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>

如果能帮我解决问题，我将不胜感激。

Answer 1

您的代码的问题是 img 元素需要像素的位置：

newImage.style.top = Math.floor(Math.random() * 400) + "px";
newImage.style.left = Math.floor(Math.random() * 400) + "px";

看这里：https://jsfiddle.net/wj4mx1dn/

Answer 2

样式属性必须是字符串。示例：

newImage.style.top = Math.floor(Math.random()*400)+"px";
newImage.style.left = Math.floor(Math.random()*400)+"px";

另一方面，您为不同的 HTML 元素设置相同的 ID。这将导致非常意外的行为。如果您需要重复使用标记，请改用类。

Answer 3

将 px 添加到您的图像位置。

      newImage.style.top = Math.floor(Math.random()*400) + 'px';
      newImage.style.left = Math.floor(Math.random()*400) + 'px';

完整代码在这里：

<script type="text/javascript">
    'use strict';
    var numberOfFaces = 5;

    function generateFaces() {
        function deleteAllChildren() {
            theLeftSide = document.getElementById("leftSide");
            while (theLeftSide.firstChild) {
                theLeftSide.removeChild(theLeftSide.firstChild);
            }
            theRightSide = document.getElementById("rightSide");
            while (theRightSide.firstChild) {
                theRightSide.removeChild(theRightSide.firstChild);
            }
        }
        var theBody = document.getElementsByTagName("body")[0];
        var theLeftSide = document.getElementById("leftSide");
        var theRightSide = document.getElementById("rightSide");
        for (var i = 0; i < numberOfFaces; i++) {
            var newImage = document.createElement("img");
            theLeftSide.appendChild(newImage);
            newImage.style.top = Math.floor(Math.random() * 400) + 'px';
            newImage.style.left = Math.floor(Math.random() * 400) + 'px';
            //theLeftSide = document.getElementById("leftSide");
            newImage.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";

            var leftSideImages = theLeftSide.cloneNode(true);
            leftSideImages.removeChild(leftSideImages.lastChild);
            theRightSide.appendChild(leftSideImages);
        }
        theLeftSide.lastChild.onclick = function nextLevel(event) {
            event.stopPropagation();
            numberOfFaces += 5;
            deleteAllChildren();
            generateFaces();
        };
        theBody.onclick = function gameOver() {
            alert("Sorry, your game is over!");
            theBody.onclick = null;
            theLeftSide.lastChild.onclick = null;
        };
        /*console.log(theLeftSide.childNodes[0]);
        console.log(theLeftSide.childNodes[1]);
        console.log(theLeftSide.childNodes[2]);
        console.log(theLeftSide.childNodes[3]);
        console.log(theLeftSide.childNodes[4]);
        */
    }
</script>

这是 HTML5 和 javascript 的浏览器问题吗？

Is this a browser issue with HTML5 and javascript?

html

javascript

browser

simple-html-dom