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

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

javascript html browser

这是HTML5和javascript的浏览器问题吗？,javascript,html,browser,simple-html-dom,Javascript,Html,Browser,Simple Html Dom,我正在Atom IDE中编写html代码，但是在浏览器上没有得到想要的结果，但是，当我尝试使用Atom的html预览时，我可以看到想要得到的结果以下是浏览器和Atom预览的屏幕截图，请查看：我还尝试在Chrome和Internet Explorer上运行代码，得到了相同的结果以下是我的代码： <!DOCTYPE html> <html> <head> <meta name="author" content="Carlos Cord

我正在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>


评估3第4部分（完成游戏）
img{
位置：绝对位置；
}
div{
位置：绝对位置；
宽度：500px；
高度：500px；
}
#右侧{
左：500px；
左边框：1px纯黑；
}
var numberOfFaces=5；
函数生成器（）{
对于（变量i=0；i

我将非常感谢您帮助我解决我的问题。

您的代码的问题是

img

元素需要pixles提供的位置：

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

请参见此处：

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

另一方面，您正在为不同的HTML元素设置相同的id。

这将导致非常意外的行为。如果您需要重用标记，请使用类来代替。

将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>


"严格使用",；
var numberOfFaces=5；
函数生成器（）{
函数deleteAllChildren（）{
theLeftSide=document.getElementById（“leftSide”）；
while（左侧第一个孩子）{
左侧.removeChild（左侧.firstChild）；
}
theRightSide=document.getElementById（“rightSide”）；
while（右侧，第一个孩子）{
theRightSide.removeChild（theRightSide.firstChild）；
}
}
var theBody=document.getElementsByTagName（“body”）[0]；
var theLeftSide=document.getElementById（“leftSide”）；
var theRightSide=document.getElementById（“右侧”）；
对于（变量i=0；i


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