I can't seem to get my function right.....It's a tuition calculator. At this point the residency and semesters don't matter. It's just credits * credit cost, but it keeps returning NaN.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Greendale Community College</title>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
var numCredits = 0;
var creditCost = 302;
var instate = 0;
var outstate = 0;
var international = 0;
var tuitionCost = number;
function calcTuition(numCredits, creditCost) {
var tuitionCost = numCredits * creditCost;
document.write("Your tuition cost is $" + tuitionCost);
}
</script>
</head>
<body>
<p><center><font face="impact" font size="200" color="green">Greendale Community College</font></center></p>
<center><img src="greendale.jpg" alt="greendale" width="512" height="256"/></center>
<h1><center>Tuition Calculator</center></h1>
<form name="calculator" action="" method="get">
<h2>Semester</h2>
<h3>(choose a semester)</h3>
<input type="radio" name="semesterFall"/> Fall 2018 <br />
<input type="radio" name="semesterSpring"/> Spring 2018 <br />
<input type="radio" name="semesterSummer"/> Summer 2018 <br />
<h2>Residency</h2>
<h3>(choose your residency)</h3>
<input type="radio" name="instate" /> In-State <br />
<input type="radio" name="outstate" /> Out-of-State <br />
<input type="radio" name="international" /> International <br />
<h2>Credits</h2>
<h3>(enter your number of credits)</h3>
<input type="text" name="numCredits" size="2" onchange="calcTuition(numCredits, creditCost)"/> Credits <br />
<input type="button" name="tuition" onclick="window.alert(calcTuition(numCredits, creditCost))" value="Calculate your Tuition" />
</form>
</body>
</html>
I took a look at what's going on and it looks like you're trying to call numCredits when it is not a valid number. The exact type of it is $[object HTMLInputElement]. Addition between an HTMLInputElement and Integer is undefined behavior and as a result the value that you obtain is NaN.
One possible solution is using the document.getElementbyId method to return the actual element and then you can perform any operation on them.
PS: You should try and debug your own functions, you mentioned you're new to this but it would be great to set up some print statements or use an interactive debugger to see exactly where the problem is occurring. This way you can troubleshoot it and understand the problem at the same time.
<script type="text/javascript">
var c_amount = 302;
function calcu_Tuition(Credits, c_amount) {
//var Credits
var Credits = document.getElementById("Credits").value //it will get the value of Credits text box and be transfer to Credits variable.
var tuition = 0;
var tuition = Credits * c_amount;
document.write("Your tuition cost is $" + tuition);
}
</script>
<body>
<h2>Credits</h2>
<h3>(enter your number of credits)</h3>
<input type="text" id="Credits" size="2" onchange="calcu_Tuition(Credits, c_amount)"/> Credits <br>
<button id="tuition" onclick="calcu_Tuition(c_amount)">Calculate your Tuition"</button>
</form>
</body>
Related
This is the HTML part of it. I am super new to javascript and my current notes arent too helpful. I have declared my three numbers so far, next is determining the if/if else statements and getting the buttons to work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- saved from url=(0014)about:internet -->
<title>Highest Number</title>
<script src="clientCode/Lab4PartBScript.js"></script>
</head>
<body>
<form action=#>
<h2>Determine Highest Number</h2>
<p>
Enter three numbers:<br />
1. <input type="text" id="txtFirst" /><br />
2. <input type="text" id="txtSecond" /><br />
3. <input type="text" id="txtThird" />
</p>
<p>
Highest Number:<input type="text" readonly="readonly" id="txtHighest" /><br />
</p>
<p>
<input type="button" value="Determine Highest Number" id="btnDetermine" onclick="btnDetermine_onclick()" />
<input type="reset" />
</p>
</form>
</body>
</html>
After getting the three numbers from your HTML, you might use Math.max() function.
Example:
let num1 = 3, num2 = 5, num3 = 1;
let higherNumber = Math.max(num1, num2, num3);
Also I recommend you to take a look on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max and visit MDN's documentation to improve your knowledge of Javascript and as future reference. Also take a look on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps to setup your Javascript if you need further help on it.
I'm trying to calculate the gas mileage. The function works but for some reason it returns a negative number, any solutions for this?
<!DOCTYPE HTML>
<html>
<head>
<title>Gas Mileage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function calcMPG(en,st,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
</script>
</head>
<body>
<h3>Gas Mileage</h3>
<form name="milespergal">
<p>Starting Mileage:<input type="text" value="0" name="start"><br>
Ending Mileage:<input type="text" value="0" name="end"><br>
Gallons Used:<input type="text" value="0" name="gallons"><br>
<input type="button" value="submit" onclick="calcMPG(document.milespergal.start.value,document.milespergal.end.value ,document.milespergal.gallons.value)">
<br>
Miles Per Gallon:<input value="0" type="text" name="mpg"></p>
</form>
</body>
</html>
Looks like you have your parameters backwards. Try defining calcMPG as this:
//Reordered st & en
function calcMPG(st, en ,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
Here's a JSFiddle
Is it possible to get a dozen results from this single basic calculation? I have two output textboxes in the sample code; how can I get these two fields to work?
<!DOCTYPE html>
<html lang = "en">
<head>
<title> multiple results calculation </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="style" href="css/main.css" type"text/css"/>
<!-- I need multiple results from single calculation!
<script type="text/javascript">
function sum()
{
var width = document.multiple results.width.value;
var height = document.multiple results.value;
var sum = parseInt(width) * parseInt(height) /144;
document.getElementById('Calculate').value = sum;
document.getElementById("results1").readOnly=true;
document.getElementById("results2").readOnly=true;
var result1= $1.99;
var result2= $2.99;
document.getElementById('Calculate').value = sum * result1;
document.getElementById('Calculate').value = sum * result2;
}
</script>
-->
</head>
<body>
<div>
<H2> Multiple instant results from single calculation</h2>
<p> the goal eventually is to have about a dozen results from this single calculation
</div>
<form name="multiple results">
<label for="width"> Width: </label>
<input type="number" <id="width" maxlength="4" size="10" value=""/>
<label for="height"> Height: </label>
<input type="number" <id="height" maxlength="4" size="10" value=""/>
<input type="button" name="button" value="Calculate" onClick="sum"/>
<div>
<label for="result1"> Result1: $ </label>
<input type="number" id="result1" name="result1"/>
<label for="result2"> Result2: $ </label>
<input type="number" id="result2" name="result2"/>
</div>
</form>
</body>
</html>
I found a solution by removing the first document.getElementById('Calculate').value = sum;, changed the remaining getElementById's and input type's to result and result2 also added the missing value="" to input, not necessary but renaming Id's helped me
I am using Notepad++ to create a simple web page where a user types in two numbers into a text box, and then presses a button. When they press the button something comes up that tells them whether the first or second number is greater. I have the following code but cant get anything to come up. Does anyone know whats wrong?
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Assignment 10 Form</title>
<script type="text/javascript">
function greaterNum(){
var value1;
var value2;
value1 = document.First_num.value;
value2 = document.last_num.value;
if (value1 > value2){
alert('Value 1 is greater than value 2');
document.body.style.background = "orange";
}
}
</script>
<style type="text/css">
body{background-color: #40FF00;
margin-left: auto;
margin-right: auto;
width: 60%;
}
#container{
border: 2px solid yellow;
padding: 20px;
}
</style>
</head>
<body>
<h1>Assignment 10</h1>
<div id="container">
<div class="Num">
<form>
<label class="label1">Enter Value 1:</label>
<input type="text" name="First_num" value=" " />
<label class="label1">Enter Value 2:</label>
<input type="text" name="last_num" value=" " />
<br/>
<input type="button" value=" Which number is greater? " onclick="greaterNum();" />
</form>
</body>
</html>
Values from inputs are retrieved as strings, you need to convert it to number. Try this:
value1 = +document.First_num.value;
value2 = +document.last_num.value;
Also, try to be consistent when naming your input, why caps for one and lowercase for the other?
You may need to use:
value1 = document.getElementById("First_num").value;
However, this only works if you assign the elements id attributes:
<input type="text" id="First_num" name="First_num" value=" " />
Otherwise, use the getElementsByName.
Hope this helps!!
Convert to floats.
value1 = parseFloat(document.First_num.value);
value2 = parseFloat(document.last_num.value);
Html is a string, not a value. You need to parse it in someway.
EDIT:
The problem seems to be grabbing the values, change it to getElementById and it works fine:
http://jsfiddle.net/fHtZU/10/
HTML
<h1>Assignment 10</h1>
<div id="container">
<div class="Num">
<form>
<label class="label1">Enter Value 1:</label>
<input type="text" id="First_num" name="First_num" />
<label class="label1">Enter Value 2:</label>
<input type="text" id="last_num" name="last_num" />
<br/>
<input type="button" id="clickme" value="Which number is greater?" onclick="greaterNum()" />
</form>
js
function greaterNum(){
var value1;
var value2;
value1 = document.getElementById("First_num").value;
value2 = document.getElementById("last_num").value;
if (value1 > value2){
alert(value1 - value2);
document.body.style.background = "orange";
}
}
Amount
<script type="text/javascript">
<!--
function interestVal()
{
var x = document.Amounts.valOfCar.value;
var y = document.Amounts.interestofCar.value;
var z = x+y;
document.Amounts.carInterest.value=z;
}
-->
</script>
</head>
<body background="bg.jpg">
<p>Calculate the cost of your car</p>
<form name = Amounts>
<p>Value of a car <input type="text" value="" name=valOfCar></p>
<p>Interest #15% <input type="text" value="" name=interestofCar></p>
<p>Value + Interest<input type="text" name=carInterest></p>
<p><input type=submit value=Calculate onClick=interestVal()></p>
</form>
</body>
Here you go. I was able to reproduce your problem by just copying your code and running it. This code will run. The principal change I made, which I believe was the source of the problem, was altering from an input of type submit to a button. As a submit, it was doing a postback, which caused the contents of the controls to disappear. Using a button avoids the postback.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function interestVal() {
var x = document.Amounts.valOfCar.value;
var y = document.Amounts.interestofCar.value;
var z = x * y;
document.Amounts.carInterest.value = z;
}
-->
</script>
</head>
<body background="bg.jpg">
<p>Calculate the cost of your car</p>
<form name = "Amounts">
<p>Value of a car <input type="text" name="valOfCar" /></p>
<p>Interest #15% <input type="text" name="interestofCar" /></p>
<p>Value + Interest<input type="text" name="carInterest" /></p>
<p><button type="button" onclick="interestVal();" >Calculate</button></p>
</form>
</body>
</html>
Another potential problem is that by summing x and y, you get their concatenated result, which is probably not what you want. I have changed that to multiplying x times y.
Finally, I have enclosed many of the attribute values in quotes and made the inputs self-closing by ending the with /> instead of >.