Является ли это проблемой браузера с HTML5 и javascript?

-1

Я делаю html-код в Atom IDE, но я не получаю желаемого результата в браузере, однако, когда я пытаюсь использовать предварительный просмотр HTML Atom, я могу видеть результат, который я хочу получить.Является ли это проблемой браузера с HTML5 и javascript?

Вот скриншоты как браузер и просматривать Atom, пожалуйста, посмотрите на них:

Atom's HTML preview

Firefox

Я также попытался запустить код на 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>

Я буду очень благодарен, чтобы помочь мне решить мою проблему.

источник

2016-04-17 Oberyn18

стиль должен быть строкой. Пример:

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

С другой стороны, вы настраиваете один и тот же идентификатор для различных HTML-элементов. Это приведет к очень неожиданному поведению. Если вам нужно повторно использовать маркеры, тогда вместо этого используйте классы.

источник

2016-04-17 20:33:50 maltalk

Спасибо так много – Oberyn18

Проблема с кодом является то, что img элемент нуждается в позиции по pixles:

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

Смотрите здесь: https://jsfiddle.net/wj4mx1dn/ атрибут

источник

2016-04-17 20:33:07 yk11

Это была проблема, спасибо много: D – Oberyn18

Добавить 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>

источник

2016-04-17 21:03:02

Является ли это проблемой браузера с HTML5 и javascript?

ответ

Смежные вопросы