setTimeout command breaking simple number ticker...
Hi all,
I have a couple of simple number scrolling functions that currently work just fine. If you copy the code below into your editor, you'll see that when the page loads, the top number scrolls up to 49 and the bottom scrolls up to 98.
My question, is that I want to wrap these two functions in a larger function and apply setTimeout events to each of the functions to give each a second or two delay upon when the page loads, before the numbers start scrolling. Attempting to either wrap the two functions into a setTimeout or even wrap these two functions into a larger function just ends up breaking the scrolling number animations. There's likely a syntax issue I'm messing up here but how would you all accomplish this? Thanks in advance!
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale = 1.0, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<style>
body {}
.placeit {font-size:26px;}
</style>
</head>
<body onload="scrollUp();scrollUpTwice();">
<div class="placeit"><span id="numbers">0</span><sup>%</sup></div>
<div class="placeit"><span id="numbersTwo">0</span><sup>%</sup></div>
<script type="text/javascript" charset="utf-8">
var nums = document.getElementById('numbers');
var numsTwo = document.getElementById('numbersTwo');
var value = parseFloat(nums.innerHTML);
var valueTwo = parseFloat(numsTwo.innerHTML);
var timeoutTimer = 10;
var timeoutTimerTwo = 30;
function scrollUp() {
// the top value in the y-axis
if(value < 49) {
value += 1;
document.getElementById('numbers').innerHTML = value.toFixed(1);
if(value < 49) {
// timeoutTimer will get reduced to zero
// if needed put in a check and a min value
countdown = setTimeout('scrollUp()', timeoutTimer);
}
}
}
function scrollUpTwice() {
// the top value in the y-axis
if(valueTwo < 98) {
valueTwo += 1;
document.getElementById('numbersTwo').innerHTML = valueTwo.toFixed(1);
if(valueTwo < 98) {
// timeoutTimer will get reduced to zero
// if needed put in a check and a min value
countdown = setTimeout('scrollUpTwice()', timeoutTimerTwo);
}
}
}
</script>
</body>
</html>
