| View previous topic :: View next topic |
| Author |
Message |
futurecoder
New member
Joined: 14 May 2011
Posts: 2
Location: India
|
 Posted: Sat May 14, 2011 2:16 am Post subject: help with this script : string to number |
 |
|
I'm trying to make a countdown timer, it works fine if I define the value myself from where it has to start. However, when I try to take output from the user it says undefined and 'Nan'.
Here is the code of html
| Code: | <html>
<head>
<script type="text/javascript" src = "experimento2.js"></script>
<link rel="stylesheet" type="text/css" href="experimento2.css" />
</head>
<body>
<h1> Count DOWn!</h1>
Enter the number to begin countdown with :
<input type = "text" id = "user" onchange = "input()"/>
<input type="button" onclick = "timedCount()" value = "begin" id = "begin" />
<input type = "button" onclick="stopCount()" value = "stop" id = "end" /><br>
<div id = "start" >00 </div>
</body>
</html>
|
Here is the script:
| Code: | var t;
var l =document.getElementById("user").value;
var c = l;
function timedCount()
{
document.getElementById('start').innerHTML=c;
c=c-1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
|
Basically my problem is that if I give c a value like c = 30. it works fine. But when I try to take the input , it gives an undefined error. |
|
| Back to top |
|
 |
sohnee
Senior Member
Joined: 17 Jul 2002
Posts: 2077
Location: UK
|
| Posted: Mon May 16, 2011 2:29 am Post subject: |
|
|
I have adjusted your code as follows...
1. You were setting the value entered by the user when the page loads, which is before they have typed in a value. I have moved this to a timer set-up function called "startTimer".
2. I am checking what the user enters by running it through "parseInt" which makes sure you are dealing with numbers.
3. I have removed all variables except for the variable for the timer and the variable for the time. You could remove the one for time by passing it to the tickDown method rather than keeping it in the global scope.
4. I have renamed things so that they tell you what they are / do.
| Code: | <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="experimento2.css" />
</head>
<body>
<h1> Count DOWn!</h1>
Enter the number to begin countdown with :
<input type="text" id="user" name="user"/>
<input type="button" onclick="startTimer()" value="begin" />
<input type="button" onclick="stopTimer()" value="stop" /><br>
<div id="display" >00</div>
<script type="text/javascript">
var timer;
var time = 0;
// Set up the timer
function startTimer() {
time = parseInt(document.getElementById("user").value);
tickDown();
}
// Process each "tick"
function tickDown() {
if (time >= 0) {
document.getElementById("display").innerHTML = time;
time--;
timer = window.setTimeout(tickDown, 1000);
}
}
// Stop the timer
function stopTimer() {
window.clearTimeout(timer);
}
</script>
</body>
</html> |
_________________
I also work on... Steve Fenton's Blog and contribute to The Enhance PHP Unit Testing Framework |
|
| Back to top |
|
|
futurecoder
New member
Joined: 14 May 2011
Posts: 2
Location: India
|
| Posted: Mon May 16, 2011 6:49 am Post subject: |
|
|
| thanks a lot dude, it works now. |
|
| Back to top |
|
|
|
TY JavaScript 3rd Ed.
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
