Html 文本/输入未显示在div中
所以我在练习构建和增量游戏，在尝试开发网页时，我遇到了这个问题。。。 这是我正在制作的网页的链接 标题{ 保证金：自动； } 要点{ 保证金：自动； 边框：3倍纯绿； } 每秒点数{ 保证金：自动； 边框：3倍纯绿； } 增量游戏测试 //变量声明和初始化 var博弈； //init函数初始化或设置我们的游戏 函数初始化 { 游戏=新游戏28； game.addAttributePoints，0； trackPoints，points，functionvalue{return value.toFixed0；}； game.addAttributePointsPerSecond，0； 游戏。追踪点每秒，每秒点数 game.addClickerearn，函数{ 游戏.属性.点数+=2； game.addClickerText+2；//添加clicker/粒子文本-仍在运行中！ }; game.addClickergetSome，函数{ //此函数还显示了访问属性的另一种方法 var p=game.getAttributePoints； 风险价值成本=10； var增加=2； 如果p>=成本 { //我们可以买 p-=成本； 游戏。设置属性点，p； var pps=game.getAttributePointsPerSecond； pps+=增加； game.setAttributePointsPerSecond，pps； } }; game.playplay；//告诉游戏对象的play函数，我们希望在游戏循环中的每个循环迭代中执行play函数中的代码 } //play函数包含基本的游戏代码 功能扮演 { var g=游戏属性； g[Points]+=g[PointsPerSecond]/game.getFPS； } //这将检查窗口是否已加载（包括文档和其中的所有对象/元素），并在加载时执行函数init window.onload=init； 增量游戏测试 要点： 每秒点数：Html 文本/输入未显示在div中,html,css,Html,Css,所以我在练习构建和增量游戏，在尝试开发网页时，我遇到了这个问题。。。 这是我正在制作的网页的链接 标题{ 保证金：自动； } 要点{ 保证金：自动； 边框：3倍纯绿； } 每秒点数{ 保证金：自动； 边框：3倍纯绿； } 增量游戏测试 //变量声明和初始化 var博弈； //init函数初始化或设置我们的游戏 函数初始化 { 游戏=新游戏28； game.addAttributePoints，0； trackPoints，points，functionvalue{return value.to
原因是您为points和points_per_second分配了两个相同的ID，而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>
<!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>
还有一个问题，因为当我粘贴你的代码时，它工作得很好，但是当我自己进行更改时，它不会这样做。所以除了div containers类之外，你还更改了其他任何内容吗？不，我只是将containers ID更改为类。代码的其余部分完全相同