个人中心
gpt4 book ai didi

html - 文本/输入未显示在 div 中

转载 作者：行者123 更新时间：2023-11-28 15:35:32 24 4
gpt4 key购买 nike

所以我正在练习构建和增量游戏，在尝试开发网页时，我遇到了这个问题......这是我正在处理的网页的链接 http://47z.bitballoon.com/ 

#header{
	margin: auto;
}

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

#points_per_second{
	margin: auto;
	border: 3px solid green;
}
<!DOCTYPE HTML>

<html>

	<head>
	
		<title>Incremental Game Test</title>
		<link rel="stylesheet" href="css/style.css">
		<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 id='points'>
	Points: <span id="points"></span>
	<input type='button' id='earn' value='Earn Points'>
	</div>
	
	<div id='points_per_second'>
	Points Per Second: <span id="points_per_second"></span>
	<input type='button' id='getSome' value='Get Some!'>
	</div>
	
	</body>
	
</html>

为什么文本和输入按钮没有显示在最终网站上？

最佳答案

原因是您为 points 和 points_per_second 分配了 2 个相同的 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>

要解决此问题，您只需制作一个 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>

关于html - 文本/输入未显示在 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44194636/

24 4 0
文章推荐： ios - 我如何在 Swift 中设置我的 tableview 的 Action 按钮垂直对齐？
文章推荐： javascript - 查找数组中最长的单词
文章推荐： html - 如何将 Bootstrap 导航栏中的下拉菜单与 css 对齐？
文章推荐： javascript - jQuery ajax 请求在 laravel 应用程序中返回 405 (不允许 POST)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com