Pass random variable to addClass

Just want to generate a random number and then add it as a class to an existing div.

But can't get the variable to be recognis开发者_运维知识库ed by addClass.

JS

$(function() {
    $("#button_text").mouseenter(function() {
        var randomNum = Math.Round(Math.random()*3);
        $("#buttons").addClass(randomNum);
    }).mouseleave(function() {
        $("#buttons").removeClass(randomNum)
    });
});

HTML

<div id="buttons">
</div>

Any help much appreciated.

Thanks for all the help.

Final solution was...

JS

$(function() {
    $("#button_text").mouseenter(function() {
        randomNum = 'rand' + Math.round(Math.random()*2);
        $("#buttons").addClass(randomNum);
    }).mouseleave(function() {
        $("#buttons").removeClass(randomNum)
    });
});

HTML

<div id="buttons">
</div>
<p>Insert intro sentence here.</p>
<div id="button_text">
  <p>Insert text here that will display the random button background when moused over</p>
</div>

CSS

#button_text
{
    display: block;
}
#buttons
{
    width: 200px;
    height: 200px;
    display: block;
    position: absolute;
    top: 145px;
    left: 370px;
    z-index: -999;
}
#buttons.rand0
{
    background: url(/hover_buttons.png) no-repeat;
    background-position: 0 0;
}
#buttons.rand1
{
    background: url(/hover_buttons.png) no-repeat;
    background-position: 0 -230px;
}
#buttons.rand2
{
    background: url(/hover_buttons.png) no-repeat;
    background-position: 0 -440px;
}

There are a couple of issues here.

1. Scoping - The variable randomNum does not exist when the mouseout method is called so your classes are only added.

2. Even if you make it into a global variable, this won't solve your problem if you use this code multiple times (this might not be the case since you seem to be using IDs, but just in case.)

3. It's Math.round and not Math.Round

4. Classes shouldn't be composed of just a number

I've use the jQuery data api to store the random classname so you can retrieve it later. Here's a fiddle of what you're trying to achieve : http://jsfiddle.net/jomanlk/339c5/

$("#button_text").mouseenter(function() {
    var randClass = 'randomClass' + Math.round(Math.random() * 3);
    $("#buttons").addClass(randClass);
    $("#buttons").data('randClassValue', randClass);
}).mouseleave(function() {
    var randClass = $("#buttons").data('randClassValue');
    $("#buttons").removeClass(randClass)
});

<p id='button_text'>
    <a id='buttons'>Buttons</a>
</p>

There's a scoping issue in play here. Make sure your random reference is accessible by both methods. Below I'm declaring my variable outside of my methods, changing its value from the $.mouseenter() method and then accessing it again from the $.mouseleave() method.

In my example I'm merely setting the text of an element, and then incrementing the text. You can adapt this to your needs by changing the two calls to $.text() to $.addClass() and $.removeClass() respectively.

Note also that it's not advised to use numbers as class names. Perhaps you should prefix the values.

var ranNum;

$("#hello")
  .mouseenter(function(){
   ranNum = Math.round(Math.random()*50);
    $(this).text(ranNum);
  })
  .mouseleave(function(){
   $(this).text(ranNum+1); 
  });

Online Demo: http://jsbin.com/icuwav/edit

try converting it to a string before adding it as a class.

edit: also, as others have mentions Math.Round needs to be Math.round

Math.Round isn't a method in javascript. However; Math.round is.

$(function() {
    $("#button_text").hover(function() {
        var randomNum = Math.round(Math.random()*3);
        $("#buttons").addClass(randomNum);
    }, function() {
        $("#buttons").removeClass(randomNum)
    });
});

Your randomNum is declared inside your mouseenter function with 'var' - it isn't visible to mouseleave().

You may also run into problems if your class names don't start with a letter - although numbers may "just work" I don't think they are valid class identifiers.

If you want to get an integer value use Math.ceil

var randomNum = Math.ceil(Math.random()*3);