Javascript problem

Status
Not open for further replies.
oldskool

oldskool

Oldie but a goodie
Messages
1,760
Location
Maine, USA
*Disclaimer: This is a homework problem, BUT all I need is one little nudge. I can't seem to find the answer to my problem anywhere...

I am writing a simple code for entering your age, and after clicking the button I get the target heart range zone. I know what the problem is, but not how to fix it. I have highlighted the part where I am stuck. Here's the code:

To make sense of it, I will tell you what is supposed to happen. You enter your age, it gets subracted from 220. The answer gets multiplied by .5 and .85, thus yielding a minimum and maximum heart rate in b.p.m. for any given age. What I am having the problem with is I can't seem to find is the syntax for text entered into the text box to be converted to a variable.

Like for example, I am attempting to have the parseInt function pass the string argument entered in the text box, which is that person's age, and send it to the yourAge variable. All the rest of the program works fine. Any help would be greatly appreciated.

Code: 
<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Target Heart Rate Page - Case Project 3-2 by Eric Maddan</title>
<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />

<head>

<p><form name="heartRate"><b>Enter your age</b><br><br>
<script type="text/javascript">
/* <![CDATA[ */

//code written by Eric Maddan

[I][B]var yourAge=parseInt(   );[/B][/I]  
// ^ ^ I know this is wrong, but can't find the syntax to convert user's input from text box to variable.
var strtNumber=220;
var formulaNumber=parseInt(strtNumber - yourAge);
var trgtStatement;
var minTargetrate=parseInt(formulaNumber * .5);
var maxTargetrate=parseInt(formulaNumber * .85);

var outBoxtext = (minTargetrate  + " to " + maxTargetrate) ;

</script>

<input type="text" name="inputText" size="20"><br><p>
<input name="trgtStatement" size="50"><br /><p>
<input type="button" value="Target  Heart  Rate" 
        OnClick="trgtStatement.value=outBoxtext  + ' beats per minute ' ;"><p>

</form>
</script>

</head>
<body>

<script type="text/javascript">
/* <![CDATA[ */


/* ]]> */
</script>

</body>
</html>
 
Your code won't work because the Javascript variables are initialized before the rest of the script is done. So, yourAge will be null because the input box doesn't exist yet.

Code: 
<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Target Heart Rate Page - Case Project 3-2 by Eric Maddan</title>
<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />

<head>

<p><form name="heartRate"><b>Enter your age</b><br><br>
<script type="text/javascript">
/* <![CDATA[ */

//code written by Eric Maddan

function getHeartRate(age)
{
	var yourAge=parseInt(age);
	
	var strtNumber=220;
	var formulaNumber=parseInt(strtNumber - yourAge);
	var trgtStatement;
	var minTargetrate=parseInt(formulaNumber * .5);
	var maxTargetrate=parseInt(formulaNumber * .85);

	var outBoxtext = (minTargetrate  + " to " + maxTargetrate);

	document.heartRate.trgtStatement.value=outBoxtext;
}


</script>

<input type="text" name="inputText" size="20"><br><p>
<input name="trgtStatement" size="50"><br /><p>
<input type="button" value="Target  Heart  Rate" onclick="getHeartRate(inputText.value);"><p>

</form>
</script>

</head>
<body>

<script type="text/javascript">
/* <![CDATA[ */


/* ]]> */
</script>

</body>
</html>

This is working code, but I've used a function instead. Let me know if this is what you need. :)
 
Yup, bingo, that did the trick ! Thanks CrazeD, I knew I was close but couldn't pin it down. Much appreciated, mate.
 
oldskool said:
Yup, bingo, that did the trick ! Thanks CrazeD, I knew I was close but couldn't pin it down. Much appreciated, mate.
Click to expand...

Gotta love JS and its lack of proper error reporting :-D (yes yes FF has a debugger, but I have found it misleading at times)
 
I am using IE7, and all you get is the little !Error(s) on page blip in the lower left corner of the browser...oh how helpful lol. Double-click that and stand back.... whooaa
 
Dr.House said:
Gotta love JS and its lack of proper error reporting :-D (yes yes FF has a debugger, but I have found it misleading at times)
Click to expand...

Lol yes, Javascript has, by far, the worst error reporting EVER.

With some additional plugs, (like the Developer Toolbar, or FireBug), it helps a little...but not really lol.
 
WTF !!

Can someone help me understand why I can't get this Javascript code to work ? First of all, this is a homework problem as the one above was. I think I almost have it working, but I can't seem to get it the rest of the way. You enter a year, click the button and it is supposed to pop an alert box up saying whether it is a leap year or not.

I don't need a complete re-write, just a hint on what I can do to fix it. Any ideas ? I've checked and rechecked the text book too. Thanks in advance btw...


Code: 
<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leap Year Calculation Page - Case Project 3-4 by Eric Maddan</title>
<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />


<center><h3>Enter the year to be queried, then click the button below :<h3></center>

<script type="text/javascript">
/* <![CDATA[ */

//code written by Eric Maddan

//Here is where variables are created then calculations are performed:


var intYear;

function calcLeapyear()    {

//if statements go here ....

	
  if (intYear % 4 == 0) {

	    if (intYear % 100 != 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else if (intYear % 400 == 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else {
		alert(document.leapYear.inputText.value  +  " is NOT a leap year ! ");
	    }
	}
	
	else {
	    alert(document.leapYear.inputText.value  +  " is NOT a leap year ! ");
	}
    }
  }
    
}

/* ]]> */
</script>


</head>
<body>

<form name="leapYear">
<center><input type="text" name="inputText" size="20"><p>
<input type="button" value="Confirm Leap Year" 
       OnClick="calcLeapyear();">

</form>

</body>
</html>
 
Your first problem is that you have an extra } bracket on line 47.

Second, your script doesn't work because you set variables before they have values.

Code: 
var intYear;

function calcLeapyear()    {

//if statements go here ....

	
  if (intYear % 4 == 0) {

In this code, you say if intYear modulus 4 == 0, but intYear was only instantiated but never given a value. If you give calcLeapYear a parameter, and then passed the value of the input box to that parameter, it would work.

Also, your logic confuses me. What are these for?

Code: 
if (intYear % 100 != 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else if (intYear % 400 == 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else {
		alert(document.leapYear.inputText.value  +  " is NOT a leap year ! ");
	    }

All you need is if intYear % 4 == 0. Leap years are always divisible by 4, and will always return 0.

See my revision:

Code: 
<html>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leap Year Calculation Page - Case Project 3-4 by Eric Maddan</title>
<meta http-equiv="content-type" content="text/html;
     charset=iso-8859-1" />


<center><h3>Enter the year to be queried, then click the button below :<h3></center>

<script type="text/javascript">
/* <![CDATA[ */

//code written by Eric Maddan

//Here is where variables are created then calculations are performed:


//var intYear;

function calcLeapyear(intYear)    {

//if statements go here ....

	if (intYear % 4 == 0) {
		alert(intYear + " is a leap year !");
	}	
	else
	{
	    alert(intYear + " is NOT a leap year !");
	}        
}

/* ]]> */
</script>


</head>
<body>

<form name="leapYear">
<center><input type="text" name="inputText" size="20"><p>
<input type="button" value="Confirm Leap Year" 
       OnClick="calcLeapyear(inputText.value);">

</form>

</body>
</html>

Hope that helps.
 
Thanks, CrazeD !

Regarding :

Also, your logic confuses me. What are these for?
Click to expand...

The problem in the text book is that it mentions the year to be queried shall be able to be divided by 4 without a remainder, but not be able to be divided by 100, as a leap year sometimes can be divided by 4 but sometimes not by 100.

The problem also goes on to state that if it can meet those two criteria, then it should also be able to be divided by 400.

Passing all that, it is a leap year. Hence why I tried to nest a few statements there to accomodate that. That is where I still need to add those two pieces in, but I think I can get it from here. I'll let you know. (See below for the reference to that, also we needed to put it in alert boxes, which is what that part of the code is for).

Thanks again ! :D



Code: 
if (intYear % 100 != 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else if (intYear % 400 == 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else {
		alert(document.leapYear.inputText.value  +  " is NOT a leap year ! ");
	    }
 
oldskool said:
Thanks, CrazeD !

Regarding :



The problem in the text book is that it mentions the year to be queried shall be able to be divided by 4 without a remainder, but not be able to be divided by 100, as a leap year sometimes can be divided by 4 but sometimes not by 100.

The problem also goes on to state that if it can meet those two criteria, then it should also be able to be divided by 400.

Passing all that, it is a leap year. Hence why I tried to nest a few statements there to accomodate that. That is where I still need to add those two pieces in, but I think I can get it from here. I'll let you know. (See below for the reference to that, also we needed to put it in alert boxes, which is what that part of the code is for).

Thanks again ! :D



Code: 
if (intYear % 100 != 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else if (intYear % 400 == 0) {
		alert(document.leapYear.inputText.value  +  " is a leap year ! ");
	    }
	    
	    else {
		alert(document.leapYear.inputText.value  +  " is NOT a leap year ! ");
	    }
Click to expand...

Well I guess I'd have to see an example for that logic to make sense to me. However, the way you are going about it is still wrong. I think what you want is multiple if statements. So, instead of the way you did it, try something like this:

Code: 
if ((intYear % 4 == 0) && (intYear % 100 != 0) && (intYear % 400 == 0)) {
     alert(intYear + " is a leap year !");
}
else
{
     alert(intYear + " is NOT a leap year !");
}

This will say, if year modulus 4 equals 0 AND year modulus 100 NOT equal 0 AND year modulus 400 equals 0, it is a leap year...else, it is not a leap year.
 
Status
Not open for further replies.

Similar threads

D
"could not parse error", what should i do?
Replies
1
Views
1K
petergroft29
P
B
inherited a 6 month old laptop that is super slow. are the specs bad or is
2
Replies
16
Views
4K
Accid89
A
B
JavaScript
Replies
0
Views
1K
bluenose1940
B
D
How to Center a JavaScript-Created Object
2 3
Replies
20
Views
4K
dwarfdude77
D
C0RR0SIVE
HTML/CSS newbie...
Replies
3
Views
3K
tehnokraat
T
Back
Top Bottom