5 Replies - 1101 Views - Last Post: 04 August 2009 - 03:16 PM

#1 d.buckner  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 73
  • Joined: 04-December 08

Small problem with javascript variables (user input)

Posted 02 August 2009 - 10:50 AM

I am trying to write a simple countdown timer in html and javascript. I am stuck on the user input to set the time, I plan to have the user select time from 3 dropdown lists (hours, minutes, seconds) I am at a loss as to how to update the variables when the choices are made.

Here is my code ( I removed some of the options from the dropdown list for space) but the rest of the code is intact:


<html >
	<head>
		
		<title>24 hour Timer</title>
		<link href="style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			
				var seconds=0;
				var minutes=0;
				var hours=0;
				  
				  function setTime(a,b,c)
					{
						  hours=c*60*60;
						minutes = b*60;
						seconds = a+minutes+hours;
						return seconds;
					}
				var totalSeconds = seconds.toString();
			</script>
	</head>
	
	<body>
		
		   
						  
			<div id="gadgetContent">
			
			<script type="text/javascript">

					document.write(totalSeconds);
					
			</script>
		   
			
			<form name="setTime" style="font-family: Arial, Helvetica, sans-serif; font-size: .1em;">
				
				<table style="width: 100%">
					<tr>
						<td>Hrs</td>
						<td>Min</td>
						<td>Sec</td>
					</tr>
					<tr>
						<td width="33%">
									<select name="hours">
									<option value="0">0</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
									<option value="9">9</option>
									<option value="10">10</option>
									
								</select>
						</td>
						<td width="33%">
								<select name="minutes">
									<option value="0">0</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
									<option value="9">9</option>
									<option value="10">10</option>
									
								
								</select>
						</td>
						<td>
								<select name="seconds">
									<option value="0">0</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
									<option value="6">6</option>
									<option value="7">7</option>
									<option value="8">8</option>
									<option value="9">9</option>
									<option value="10">10</option>
									
				</select>
						</td>
					</tr>
				</table>	   				
				
				<br>
				<br>
				<br>
						
				<input type="button" value="set" onclick=setTime(setTime.seconds.value,setTime.minutes.value,setTime.hours.value)/>
				<br>
				<br>
				<br>
				<input type="button" value="start"/>
			</form>
			</div>
		
	</body>
</html>



Thanks in advance for your assistance.

Is This A Good Question/Topic? 0
  • +

Replies To: Small problem with javascript variables (user input)

#2 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1156
  • View blog
  • Posts: 7,171
  • Joined: 07-September 06

Re: Small problem with javascript variables (user input)

Posted 02 August 2009 - 11:01 AM

Try these changes:

This:
		<script type="text/javascript">
			
				var seconds=0;
				var minutes=0;
				var hours=0;
				  
				  function setTime(a,b,c)
					{
						  hours=c*60*60;
						minutes = b*60;
						seconds = a+minutes+hours;
						return seconds;
					}
				var totalSeconds = seconds.toString();
			</script>


to this:
		<script type="text/javascript">
			
				var seconds=0;
				var minutes=0;
				var hours=0;
				var totalSeconds = 0;
				  

				  function setTime(a,b,c)
					{
						  hours=c*60*60;
						minutes = b*60;
						seconds = a+minutes+hours;
						totalSeconds = seconds;
						document.getElementById("secondOutput").innerHTML = totalSeconds;
						return seconds;
					}
			</script>


This:
			<div id="gadgetContent">
			
			<script type="text/javascript">

					document.write(totalSeconds);
					
			</script>


To this:
			<div id="gadgetContent">
			
							  <div id="secondOutput">0</div>


Now, I haven't tested this, but I think it will work out as you wnated.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 d.buckner  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 73
  • Joined: 04-December 08

Re: Small problem with javascript variables (user input)

Posted 04 August 2009 - 08:14 AM

View PostBetaWar, on 2 Aug, 2009 - 10:01 AM, said:

Try these changes:

This:
		<script type="text/javascript">
			
				var seconds=0;
				var minutes=0;
				var hours=0;
				  
				  function setTime(a,b,c)
					{
						  hours=c*60*60;
						minutes = b*60;
						seconds = a+minutes+hours;
						return seconds;
					}
				var totalSeconds = seconds.toString();
			</script>


to this:
		<script type="text/javascript">
			
				var seconds=0;
				var minutes=0;
				var hours=0;
				var totalSeconds = 0;
				  

				  function setTime(a,b,c)
					{
						  hours=c*60*60;
						minutes = b*60;
						seconds = a+minutes+hours;
						totalSeconds = seconds;
						document.getElementById("secondOutput").innerHTML = totalSeconds;
						return seconds;
					}
			</script>


This:
			<div id="gadgetContent">
			
			<script type="text/javascript">

					document.write(totalSeconds);
					
			</script>


To this:
			<div id="gadgetContent">
			
							  <div id="secondOutput">0</div>


Now, I haven't tested this, but I think it will work out as you wnated.

Hope that helps.



Thanks for your reply, but I still have the same problem, there is no change to the secondOutput variable.
Was This Post Helpful? 0
  • +
  • -

#4 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Small problem with javascript variables (user input)

Posted 04 August 2009 - 12:19 PM

Try this out.

<html>
	<head>
		<title>24 hour Timer</title>
		<link href="style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			var seconds = 0;
		var minutes = 0;
		var hours = 0;
		var totalSeconds = 0;

	  function setTime(a, b, c) {
				//alert(a);
				//alert(b);
				//alert(c);
			hours = c * 60 * 60;
			minutes = b * 60;
			seconds = a + minutes + hours;
			totalSeconds = seconds;

			document.getElementById("secondOutput").innerHTML = totalSeconds;
			return seconds;
	  }
		</script>
	</head>
	<body>		 
		<div id="gadgetContent">
			<div id="secondOutput">0</div>
			<form id="frmSetTime" style="font-family: Arial, Helvetica, sans-serif; font-size: .1em;" action="pagenamehere">
			<table style="width: 100%">
				  <tr>
					  <td>Hrs</td>
					<td>Min</td>
					<td>Sec</td>
				  </tr>
				  <tr>
					<td width="33%">
						<select name="hours">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							</select>
					</td>
					<td width="33%">
						<select name="minutes">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</td>
					<td>
						<select name="seconds">
							<option value="0">0</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							</select>
					</td>
				  </tr>
			</table>					   
			<br /><br /><br />
   			<input type="button" value="set" onclick="setTime(frmSetTime.seconds.value, frmSetTime.minutes.value, frmSetTime.hours.value);" />
			<br /><br /><br />
			<input type="button" value="start" />
			</form>
		</div>
	</body>
</html>



~Camo
Was This Post Helpful? 1
  • +
  • -

#5 d.buckner  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 73
  • Joined: 04-December 08

Re: Small problem with javascript variables (user input)

Posted 04 August 2009 - 02:32 PM

You got me alot closer to what I wanted, but I had to make a couple of changes, your solution was concatenating all three strings, not adding them into one total.

function setTime(a, b, c) {
			hours = parseInt(c) * (60 * 60);
			minutes = parseInt(b) * 60;
			seconds = parseInt(a);
			
		 totalSeconds = parseInt(seconds+minutes+hours);

			document.getElementById("secondOutput").innerHTML = totalSeconds;
			return seconds;
	  }



Thank you for your assistance!!!
Was This Post Helpful? 0
  • +
  • -

#6 CamoDeveloper  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 20
  • View blog
  • Posts: 250
  • Joined: 12-June 09

Re: Small problem with javascript variables (user input)

Posted 04 August 2009 - 03:16 PM

I was just going from what you had, I just wanted to get the functionality to work. You're welcome, glad I could help!

~Camo
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1