Question

<!doctype html>
<html>
    <head>
        <title>Reaction Game</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1"  />
		
	<style>
	
		body{
			background-color:#FFFFDB;
		}
		
		#container{
    		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		border-radius: 20px;
    		width:350px;
    		margin:50px auto;
			height:150px;
    		padding:auto;
			background-color:#CCFF99;
			display:block;
			
		} 
		#challenge{
			padding:5px 5px 5px 5px;
			text-align:center;
			display:block;
		}	
		
		#container2{
    		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    		border-radius: 50px;
    		width:450px;
			height:65px;
    		margin:10px 0px 0px -53px;
    		padding:auto;
			background-color:#00FFFF;
			position: absolute;
			display:block;
		}
		
		#instruction{
			padding:5px 5px 5px 10px;
			text-align:center;
			display:block;
			
		}
		
		#startGame{
    		background-color: #CFDCE7;
    		width:100px;
    		height:40px;
    		border-radius: 10px;
    		font-family: "Trebuchet MS", Helvetica, sans-serif;
    		font-size: 1em;
    		border-style: solid;
    		border-color: transparent;
    		color: #666666;
			position:center;
			text-align: center;
			-webkit-transition:all 1s ease-out;
			-moz-transition:all 1s ease-out;
			-ms-transition:all 1s ease-out;
			-o-transition:all 1s ease-out;
			transition:all 1s ease-out;
			margin-left:-30px;
			
			

    	}
		#startGame:hover{
			background-color:red;
			font-size:150%;
			border-radius: 50px;
			width:200px;
			height;80px;
			font-weight:bold;
			-webkit-transform:scale(5);
			-moz-transform:scale(5);
			-ms-transform:scale(5);
			-o-transform:scale(5);
			transform:scale(5);
			position;center;
			
		} 
		
		#time {
		font-size:1.2em;
		font-family:arial;
		color:#333333;
		border:1px;
		border-style:dashed;
		width:280px;
		margin:auto;
		padding:auto;
		text-align:center;
		display:none;
		}
		
	</style>
	
	</head>
			
		<body>
			<div id="container">
				<div id="challenge"><h1>Are you up for the reaction challenge?</h1>
				<br/>
				<div id="container2">
				<div id="instruction"><p>Click on the boxes and circles as quickly as you can!</p><div>
				<br/>
				<br/>
				<br/>
				<button id="startGame">Let's start</button>
			
			
			<div id="time">
			
				Your last try: <span id="tryTime">0</span>s</p>
				Best try: <span id="bestTime">0</span>s</p>
				Average Try: <span id="averageTime">0</span>s</p>
			
			</div>
			
		<script type="text/javascript">
			var container;
			var container2;
			var lasTry;
			var time;
			var startGame;
				
			document.getElementById("startGame").onclick=function() {
				document.getElementById("time").style.display="block";
				document.getElementById("container").style.display="none";
			}
			
		</script>
	</body>
</html>

        document.getElementById("startGame").onclick=function() {
            document.getElementById("time").style.display="block";
            document.getElementById("container").style.display="none";
        }

按下“startGame”按钮后，我无法使用onclick功能显示div“time”，如果我这样做，则显示其它方式无效。请给我一些提示我在哪里提前做错了！

Answer 1

我认为你的问题是你遗漏的大量关闭div标签。您的onClick有效，但它不会向整个页面的父div添加任何内容，因为该标记未关闭

document.getElementById("startGame").onclick = function() {
  document.getElementById("time").style.display = "block";
  document.getElementById("container").style.display = "none";
}

<div id="container">
  <div id="challenge">
    <h1>Are you up for the reaction challenge?</h1>
    <br/>
    <div id="container2">
      <div id="instruction">
        <p>Click on the boxes and circles as quickly as you can!</p>
        <div>
          <br/>
          <br/>
          <br/>
          <button id="startGame">Let's start</button>
        </div>
      </div>
    </div>
  </div>
</div>


          <div id="time">

            Your last try: <span id="tryTime">0</span>s</p>
            Best try: <span id="bestTime">0</span>s</p>
            Average Try: <span id="averageTime">0</span>s</p>

          </div>

如果您在时间 div之前关闭顶部容器标记，则会向标记内的所有元素添加显示无

Answer 2

正确检查了所有<div>标记。我想你错过了一个</div>结束标记

Javascript onclick显示阻止问题

2 个答案: