Animated random number not running

Question

I have used the code like post in Random Number Effect In Jquery.. and the result http://jsfiddle.net/ZDsMa/94/...

Now I write full code html and jquery in one file php(index.php) and place on my server...

<html>
<title>Randomize Number</title>
<head>
<style type="text/css">
#output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 160px;
    color: red;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var output, started, duration, desired;
// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );

    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );
    }
}, 1000);

</script>
</head>
<body>
<div id="output">-</div>                    
</body>
</html>

The animated random number not displaying (jscript not running, only box with '-' characher/css)

What's wrong with my code?

score 1 · Answer 1 · answered Mar 22 '13 at 05:01

You just need to make sure your code gets executed after the page is rendered. Try wrapping it with:

...
<script>
$( function () {
    var output, started, duration, desired;
    // Constants
    duration = 5000;

    ...

    }, 1000);
});
</script>
...

You can find more info here jQuery.ready().

score 0 · Answer 2 · answered Mar 22 '13 at 04:30

0

You need to wrap the code that interacts with the DOM in a $(document).ready() callback:

$(document).ready(function() {
    ...
})

answered Mar 22 '13 at 04:30

Blender

289,723
53
439
496

i do not understand Blender, where should i place the code "$(document).ready()" above..?? – andry Mar 22 '13 at 04:46
@andry: http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function – Blender Mar 22 '13 at 04:48

score 0 · Answer 3 · answered Mar 22 '13 at 05:05

hi use this javascript code it work

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var output, started, duration, desired;
// Constants
duration = 5000;
desired = '50';

// Initial setup
output = $('#output');
started = new Date().getTime();

// Animate!
animationTimer = setInterval(function() {
    // If the value is what we want, stop animating
    // or if the duration has been exceeded, stop animating
    if (output.text().trim() === desired || new Date().getTime() - started > duration) {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );

    } else {
        console.log('animating');
        // Generate a random string to use for the next animation step
        output.text('' + Math.floor(Math.random() * 990)

        );
    }
}, 1000);
})

Animated random number not running

3 Answers3