I am trying to generate a random number for the css opacity.

This is what I tried so far.

CSS

.test{
    position : absolute;
    width : 15px;
    height : 15px;
    border-radius:15px;
    background-color : black; 
}​

Script

$(function() {
    for (var i = 0; i < 300; i++) {
        $("<div>", {
            class: "test",
            css: {
                opacity: randomOpacity
            }
        }).appendTo("body");
    }

    function randomOpacity() {
        var opac = 0;
        opac = Math.random() < 1;
        console.log(opac);
    }

    randomize();
});​

The Fiddle

I am trying to generate a random number for the css opacity.

This is what I tried so far.

CSS

.test{
    position : absolute;
    width : 15px;
    height : 15px;
    border-radius:15px;
    background-color : black; 
}​

Script

$(function() {
    for (var i = 0; i < 300; i++) {
        $("<div>", {
            class: "test",
            css: {
                opacity: randomOpacity
            }
        }).appendTo("body");
    }

    function randomOpacity() {
        var opac = 0;
        opac = Math.random() < 1;
        console.log(opac);
    }

    randomize();
});​

The Fiddle

• javascript
• jquery
• math
• random
• opacity

6 Answers 6

There are multiple errors with your fiddle:

• You are spawning 300 divs that are all absolutely positioned. They stack on top of each other and so would appear black regardless.
• You aren't actually calling the function (missing parentheses)
• Math.random() < 1 is going to return True instead of a number.
• You aren't returning opac from your function.
• You were calling randomize(), which isn't defined.

Corrected version: http://jsfiddle/RucKd/1/

Math.random() already generates a random number between 0 and 1, so:

$(function() {
    for (var i = 0; i < 100; i++) {
        $("<div>", {
            class: "test"
        }).css('opacity', Math.random()).appendTo("body");
    }
});

Fiddle

edit: Re-inserted your loop in my answer and removed absolute pos from the fiddle. Read @ChristopheBiocca (+1)'s answer for a more plete code review.

JS

 $(function() {

        for (var i = 0; i < 300; i++){
          $("<div>", {
            class : "test",
            css : {
              opacity : randomOpacity
            }
          }).appendTo("body"); 
        }


        function randomOpacity(){
          var opac = 0;
             opac =  (Math.random());
            return opac;
        }

      });

CSS remove position : absolute;, with this css all your divs at the same place

.test{ width : 15px; height : 15px; border-radius:15px; background-color : black; }​

The css functions alters a css attribute, Math.random() returns 0-1 so you can just drop it in. The following code alters the opac div's opacity.

 <div id="opac">
 lalalalala
</div>
<script>
$(document).ready(function(){
    $("#opac").css('opacity', Math.random());
});
</script>

$(document).ready calls everything inside it once the page is loaded, good idea to use for things like this.

$('#foobar').css({ opacity: Math.random() });​

Math.random() always returns a value between 0 and 1 and you can put it directly in the function that creates divs. Also, the position: absolute in your CSS places every div in the same place, so you are not able to see the result correctly. Try this:

CSS

.test{
    width : 15px;
    height : 15px;
    border-radius:15px;
    background-color : black; 
}​

JS

$(function() {
    for (var i = 0; i < 300; i++) {
        $("<div>", {
            class: "test",
            css: {
                opacity: Math.random()
            }
        }).appendTo("body");
    }
});​

Anyway, the randomize() function is not defined.