class - How do I affect all the classes on javascript? -
here sample code html , css
body{ font-family: verdana, geneva, sans-serif; } .box{ width: 140px; height: 140px; background-color: red; display: none; position:relative; margin-left: auto; margin-right: auto; } .bold{ font-weight: bold; } .table{ border: 2px solid black; height: 150px; width: 150px; } </style>
<p class="bold">your time: <span id="time">0.000</span>s</p> <table id="table"> <tbody> <tr> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> </tr> <tr> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> </tr> <tr> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> <td class="table"><div class="box"></div></td> </tr> </tbody> </table> <script type="text/javascript"> function getrandomcolor() { var letters = '0123456789abcdef'.split(''); var color = '#'; (var = 0; < 6; i++ ) { color += letters[math.floor(math.random() * 16)]; } return color; } var clickedtime; var createdtime; var reactiontime; function makebox(){ createdtime=date.now(); var time = math.random(); time = 5000*time; var box = document.getelementsbyclassname("box"); settimeout(function(){ if(math.random()>0.5){ (var i=0;i<box.length; i++) { box[i].style.borderradius="100px"; }else{ (var i=0;i<box.length; i++) { box[i].style.borderradius="0"; } (var i=0;i<box.length; i++) { box[i].style.backgroundcolor=getrandomcolor(); (var i=0;i<box.length; i++) { box[i].style.display="block"; createdtime=date.now(); }, time); } (var i=0;i<box.length; i++) { box[i].onclick=function(){ clickedtime=date.now(); reactiontime=(clickedtime-createdtime)/1000; document.getelementbyid('time')[0].innerhtml=reactiontime; this.style.display="none"; makebox(); } makebox(); </script>
my goal here display different shapes in 9 boxes @ once , i'm starting out first display shape in boxes when use code, nothing shows up. also, i've checked codes getting elements classes, seems bit more getting ids. , i've tried using loops able access elements don't know why doesnt work. :/
have applied css styles box class? if not, width , height 0 why won't see anything.
try adding in <head>
of html:
<style> .box { width:100px; height:100px; } </style>
Comments
Post a Comment