css - Dynamic colour changes on divs using javascript -
i need help. can't javascript dynamically change colour of 3 divs listed in code below. have pasted full code below...
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style> .box{ width:100px; height:100px; } </style> </head> <body> <div class="box"> quote 1 </div> <div class="box"> quote 2 </div> <div class="box"> quote 3 </div> <script type="text/javascript"> var bgcolorlist=new array( "#ff33cc", "#cc33ff") $(".box").css("background-color",bgcolorlist[math.floor(math.random()*bgcolorlist.length)]); </script> </body> </html>
you're using jquery on $(".box").css()
, haven't linked library! add before current script:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
or, don't use jquery @ all:
var boxes = document.queryselectorall('.box'); for(var i=0; i<boxes.length; i++) { boxes[i].style.backgroundcolor = bgcolorlist[math.floor(math.random()*bgcolorlist.length)]; }
Comments
Post a Comment