文/输入没有显示在DIV了

，所以我练的建筑和增量游戏，同时努力发展网页，我碰到这个问题...... 这里链接网页我的工作http://47z.bitballoon.com/文/输入没有显示在DIV了

#header{ 
 
\t margin: auto; 
 
} 
 

 
#points{ 
 
\t margin: auto; 
 
\t border: 3px solid green; 
 
} 
 

 
#points_per_second{ 
 
\t margin: auto; 
 
\t border: 3px solid green; 
 
}

<!DOCTYPE HTML> 
 

 
<html> 
 

 
\t <head> 
 
\t 
 
\t \t <title>Incremental Game Test</title> 
 
\t \t <link rel="stylesheet" href="css/style.css"> 
 
\t \t <script src="http://aldo111.github.io/incremental-game-engine-js/js/incrementalObject.js"></script> 
 
\t \t <script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script> 
 
\t \t 
 
\t <!--Our Javascript Code--> 
 
\t \t <script type="text/javascript"> 
 
\t \t 
 
\t //Variable Declarations & Initializations 
 
\t \t var game; 
 
\t 
 
\t 
 
\t //the init() function initializes or sets up our game 
 
\t function init() 
 
\t { 
 
\t \t game=new Game(28); 
 
\t \t \t game.addAttribute("Points",0); 
 
\t \t \t \t game.track("Points","#points", function(value) { return value.toFixed(0); }); 
 
\t \t \t game.addAttribute("PointsPerSecond",0); 
 
\t \t \t \t game.track("PointsPerSecond","#points_per_second") 
 
\t \t 
 
\t \t game.addClicker("#earn",function() { 
 
\t \t \t game.attributes.Points+=2; 
 
\t \t \t game.addClickerText("+2");//adds clicker/particle text - still under works! 
 
\t \t }); 
 
\t \t 
 
\t \t game.addClicker("#getSome", function() { 
 
\t \t //this function also shows another way to access attributes 
 
\t \t var p=game.getAttribute("Points"); 
 
\t \t var cost=10; 
 
\t \t var increase=2; 
 
\t 
 
\t \t \t if (p>=cost) 
 
\t \t { 
 
\t \t \t //we can buy 
 
\t \t \t \t p-=cost; 
 
\t \t \t \t game.setAttribute("Points",p); 
 
\t \t \t \t var pps=game.getAttribute("PointsPerSecond"); 
 
\t \t \t \t pps+=increase; 
 
\t \t \t \t game.setAttribute("PointsPerSecond",pps); 
 
\t \t } 
 
\t \t 
 
\t 
 
\t 
 
\t 
 
}); 
 
\t \t \t 
 
\t \t game.play(play);//Tells the Game() object's play() function that we want to execute the code in our play() function for every loop iteration in the game loop 
 
\t } 
 
\t 
 
\t //the play() function contains essential game code 
 
\t function play() 
 
\t { 
 
\t \t var g=game.attributes; 
 
\t \t g["Points"]+=g["PointsPerSecond"]/game.getFPS(); 
 
\t \t 
 
\t } 
 
\t 
 
\t //this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has 
 
\t \t window.onload=init; 
 
\t \t 
 
\t \t </script> 
 
\t \t 
 
\t \t 
 
\t </head> 
 
\t 
 
\t <body> 
 
\t <div id='header'> 
 
\t \t <h1><center>Incremental Game Test</h1> 
 
\t </div> 
 
\t <div id='points'> 
 
\t Points: <span id="points"></span> 
 
\t <input type='button' id='earn' value='Earn Points'> 
 
\t </div> 
 
\t 
 
\t <div id='points_per_second'> 
 
\t Points Per Second: <span id="points_per_second"></span> 
 
\t <input type='button' id='getSome' value='Get Some!'> 
 
\t </div> 
 
\t 
 
\t </body> 
 
\t 
 
</html>

为什么文本和输入按钮显示不出来最终的网站上？

来源

2017-05-26 erocktion

的原因是，你正在分配2组相同的ID为points和points_per_second，而JavaScript的只挑了一个ID。只是要1个Points ID和1个points_per_second ID如下所示：

<div class='points'> 
    Points: <span id="points"></span> 
    <input type='button' id='earn' value='Earn Points'> 
</div> 

<div class='points_per_second'> 
    Points Per Second: <span id="points_per_second"></span> 
    <input type='button' id='getSome' value='Get Some!'> 
</div>

为了解决这个问题，你必须做只有一个ID。我更新了你的代码，这里是工作示例。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Incremental Game Test</title> 
     <style type="text/css"> 
      #header{ 
       margin: auto; 
      } 

      #points{ 
       margin: auto; 
       border: 3px solid green; 
      } 

      #points_per_second{ 
       margin: auto; 
       border: 3px solid green; 
      } 
     </style> 
     <script src="http://aldo111.github.io/incremental-game-engine-js/js/incrementalObject.js"></script> 
     <script src="http://aldo111.github.io/incremental-game-engine-js/js/jquery.js"></script> 

     <!--Our Javascript Code--> 
     <script type="text/javascript"> 

      //Variable Declarations & Initializations 
      var game; 


      //the init() function initializes or sets up our game 
      function init() 
      { 
       game=new Game(28); 
        game.addAttribute("Points",0); 
         game.track("Points","#points", function(value) { return value.toFixed(0); }); 
        game.addAttribute("PointsPerSecond",0); 
         game.track("PointsPerSecond","#points_per_second") 

       game.addClicker("#earn",function() { 
        game.attributes.Points+=2; 
        game.addClickerText("+2");//adds clicker/particle text - still under works! 
       }); 

       game.addClicker("#getSome", function() { 
        //this function also shows another way to access attributes 
        var p=game.getAttribute("Points"); 
        var cost=10; 
        var increase=2; 

         if (p>=cost) 
        { 
         //we can buy 
          p-=cost; 
          game.setAttribute("Points",p); 
          var pps=game.getAttribute("PointsPerSecond"); 
          pps+=increase; 
          game.setAttribute("PointsPerSecond",pps); 
        } 
       }); 

       game.play(play);//Tells the Game() object's play() function that we want to execute the code in our play() function for every loop iteration in the game loop 
      } 

      //the play() function contains essential game code 
      function play() 
      { 
       var g=game.attributes; 
       g["Points"]+=g["PointsPerSecond"]/game.getFPS(); 

      } 
      //this checks if the window has loaded - includes the document, and all objects/elements in it - and executes the function init() when it has 
      window.onload=init; 
     </script> 
    </head> 

    <body> 
    <div id='header'> 
     <h1><center>Incremental Game Test</h1> 
    </div> 
    <div class='points'> 
     Points: <span id="points"></span> 
     <input type='button' id='earn' value='Earn Points'> 
    </div> 

    <div class='points_per_second'> 
     Points Per Second: <span id="points_per_second"></span> 
     <input type='button' id='getSome' value='Get Some!'> 
    </div> 

    </body> 

</html>

来源

2017-05-26 06:41:45

还有一个问题，因为当我粘贴你的代码时，它可以正常工作，但是当我自己做出更改时，它不会更改除div容器类以外的任何其他内容吗？ – erocktion

不，我只是将容器ID更改为类。其余代码完全相同 –

文/输入没有显示在DIV了

回答

相关问题