0

I'm trying to make a grid of boxes that all change color randomly. So far I can only make one box change color. The obvious, but very inefficient, way to do this would be to make unique assignments for each div and animation accordingly... but there has to be another way???

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<style>
#box {
    background-color:blue;
    padding:10px; 
    border:7px solid black; 
    width: 25; 
    height:25; 
    float:left; 
    box-shadow: 2px 2px 5px black;
    margin:10px;}
</style>
</head>
<body>
<pre><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div><div id="box"></div></pre>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {  

     spectrum();  

     function spectrum(){  
        var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';  
        $('#box').animate( { backgroundColor: hue }, 1000);  
        spectrum();  
     }  

    });  
</script>

</body>
</html>
2
  • You can't have multiple items with the same id.
    – user1823761
    May 29, 2013 at 3:32
  • Think of it a bit like a school. If you want a particular student to do something you would call them by their Name or Student ID and tell them to do something. If you wanted a group to do something, you would tell their CLASS to do something. If you told a CLASS to do something then told one student in that class (by their ID) to do something, the student who had specific instruction would disobey a conflicting instruction for his class, and go do directly what you told them to do. TL;DR - Use class if there is more than 1 on any page, use ID if it is singular and specific.
    – James
    May 29, 2013 at 4:06

3 Answers 3

3

Replace all your id's with class.

<div class="box"></div>

If you use ID several times on elements the selector will only pick the first element with that ID.

But when you use class instead, the selector will pick all the element having that class.

2

The id attribute must be unique. You can't re-use it across multiple elements. As it stands, your document is invalid.

Use the class attribute instead, if you want to assign the same class to several elements.

1

Instead of having:

<div id="box"></div>

Change the id to a class, so it becomes:

<div class="box"></div>

And your jquery becomes:

$('.box').animate( { backgroundColor: hue }, 1000);  

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.