Menu
<!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";
}
I cannot use onclick function to display div "time" after button "startGame" is pressed, if i do it other way to display none it works. please give me some tips where am i making a mistake cheers in advance!!!
509
I think your problem is the mass amount of closing div tags you're missing. Your onClick works but it adds none to the parent div of the whole page because that tag is not closed
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>
If you close the top container tag before the time div it will add a display none to all elements within the tags
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
