Why am I only getting one math.random value and how do I get more?

Question

Here is my code. The problem is that it generates one math.random value and that's it. I need it to keep generating value after each time I click a div.

var rand = Math.random();
$(document).ready(function() {
    if(rand < .5) {
        $('div').click(function() {
            $(this).addClass('blue');
        });
    } else if(rand < .7) {
        $('div').click(function() {
            $(this).toggleClass('red');
        });
    } else if(rand < .9) {
        $('div').click(function() {
            $(this).toggleClass('purple');
        });
    } else {
        $('div').click(function() {
            $(this).toggleClass('black');
        });
    }
});

It's because you are only setting the value of `rand` once, you need to do `rand = Math.random()` again where you want to get a new random value, being inside your `click` event. — Spencer Wieczorek, Nov 23 '15 at 01:05

score 2 · Answer 1 · answered Nov 22 '15 at 23:49

2

If you want your logic to run on every click of the div, you should have your random number generation and if tree reside inside the div clicking callback. Something like:

$('div').click(function() {
    var rand = Math.random();
    if(rand < .5) {
       $(this).addClass('blue');
    } else if (rand < .7) {
       $(this).addClass('red');
    } 
    // and so on
});

answered Nov 22 '15 at 23:49

icasdri

106
1
4

Awesome I was wondering if I set a div to a certain width how can I obtain that width in javascript. If I id it 'div' – Tbaustin Nov 23 '15 at 00:07

score 1 · Answer 2 · edited May 23 '17 at 12:15

1

Try this code and tell me if it needs improvement :)

Here is a definition of the code used here...

Math.floor is used to remove the decimal point from a number. To get a random number that can pull a random array element, you must convert the decimal to a whole number and make sure that it is not larger or smaller than the number of elements in the array. You can provide a range of Math.random by multiplying it by the greatest number you want returned. You can also tell it to return a number that is between x and y (see https://stackoverflow.com/a/1527834/3011082).

Note: Feel free to also put hex, rgb, or any color value in the array as well.

$(document).ready(function() {
  var colors = ['green', 'black', 'red', 'orange', 'blue'];
  var randomNumber = 0;
  $('div').click(function() {
    if (this.hasAttribute('data-clicked') == false) {
      randomNumber = Math.floor(Math.random() * colors.length);
      this.style.backgroundColor = colors[randomNumber];
      this.setAttribute('data-clicked', '');
    }
  });
});

div {
  width: 50px;
  height: 50px;
  border: 2px solid orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

edited May 23 '17 at 12:15

Community

1
1

answered Nov 22 '15 at 23:52

www139

4,960
3
31
56

You should define `randomNumber` outside of `$("div").click(…)` and assign it no value. And inside the ` $("div").click(…)`, assign it the random number. This will not make a new variable every time a user will click which will have a good impact on the computer's memory. I hope you got it. – Arjun Nov 22 '15 at 23:59
that is a really neat way of doing it!! – Tbaustin Nov 23 '15 at 00:08
@Tbaustin Glad you like it. I will update my answer with definitions of each "new" function used so that you understand. – www139 Nov 23 '15 at 00:09
Something I noticed is that if i keep clicking the squares will keep changing until the become the last random in the if statement. Is there a way once they change to keep them that way? – Tbaustin Nov 23 '15 at 00:40
@Tbaustin What do you mean? This code will make it able to change colors randomly forever. Sometimes the given color is the same as the last which means that you will sometimes have to click the div several times to change the color. Could you explain in more detail? Thank you :) – www139 Nov 23 '15 at 01:33
I just want it to change only one time once you have clicked it. Also would you know how to make like a timer on the page that keeps counting up? – Tbaustin Nov 23 '15 at 02:06
@Tbaustin What would the timer be counting up? – www139 Nov 23 '15 at 02:42

score 0 · Answer 3 · answered Nov 22 '15 at 23:45

0

Well, it only generates one value bc you only generate it once. So you would have to regenerate it each time you click a button:

$('div').click(function(){
    rand = Math.random();
    $(this).addClass('blue');
});

etc

answered Nov 22 '15 at 23:45

frontend_dev

1,693
14
28

Why am I only getting one math.random value and how do I get more?

3 Answers3