Gas Mileage Calculator Returning Negative - javascript

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

Related

I can't seem to get my code to display my calculation, am I missing an output tag?

I am trying to create an MPG (Miles Per Gallon) calculator in Javascript. I can't seem to display my results after I hit the "Calculate" button.
<html>
<head> <title> Miles per Gallons Calculator</title> </head>
<body bgcolor= "#FFFFFF">
<p><script language="JavaScript"> <!-function calcMPG() { var Miles =
document.form1.txtMiles.value var Gallons =
document.form1.txtGallons.value;
var MPG MPG = Miles/Gallons; document.form1.txtMPG.value = MPG}
// --> </script>
<strong>Miles per Gallons Calculator</strong></p> <p>by </p>
<form name="form1"> <p>Miles <input type="text" size="21" name="txtMiles"></p>
<p>Gallons <input type="text" size="20" name="txtGallons"></p>
<p><input type="button" name="btnCalc" value="Calculate MPG" onclick="calcMPG()"></p>
<p><input type="reset" name="btnClear" value="Clear"></p> <p>Miles Per Gallon
<input type="text" size="20" name="txtMPG"></p>
</form>
</body>
</html>
Hi Please Use this code I hope it's helpful
Thanks
<html>
<head> <title> Miles per Gallons Calculator</title> </head>
<body bgcolor= "#FFFFFF">
<p><strong>Miles per Gallons Calculator</strong></p> <p>by </p>
<form name="form1"> <p>Miles <input type="text" size="21" name="txtMiles"></p>
<p>Gallons <input type="text" size="20" name="txtGallons"></p>
<p><input type="button" name="btnCalc" value="Calculate MPG" onclick="calcMPG()"></p>
<p><input type="reset" name="btnClear" value="Clear"></p> <p>Miles Per Gallon
<input type="text" size="20" name="txtMPG"></p>
</form>
</body>
</html>
<script language="JavaScript">
function calcMPG() {
var Miles = document.form1.txtMiles.value
var Gallons = document.form1.txtGallons.value;
var MPG = parseInt(Miles)/parseInt(Gallons);
document.form1.txtMPG.value = MPG
}
</script>
Try add your script tag bottom of the body tag.

Javascript not working onchange

I've got a simple html and JS script, but it doesn't fire the alert message onchange when I enter 2 in the input number field.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("partysize");
if (x==2) window.alert ("You entered" + x);
}
</script>
</head>
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id = "partysize" name="partySize" onchange="myFunction()" >
<br />
<input type="SUBMIT" name="submitButton">
</form>
<br />
</div>
</body>
</html>
ugh, fixed by getting the value of the element:
function myFunction() {
var x = document.getElementById("partysize").value;
if (x==2) window.alert ("You entered" + x);
}
You need to get the value from the input box but in your snippet x is the only dom element. Pass the value to the change handler using this.value. Also parseInt will convert the number value in string to number
function myFunction(x) {
if (parseInt(x, 10) === 2) {
alert("You entered" + x);
}
}
<body bgcolor="#6BD3FF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">
<div align="center">
<br> Please enter the party size:
<input type="number" id="partysize" name="partySize" onchange="myFunction(this.value)">
<br/>
<input type="submit" name="submitButton">
<br />
</div>
</body>

Function keeps returning NaN, tuition calculator

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>

Write text into an inputbox using buttons

i'm trying to create some kind of Desktop Keyboard (using/writing kyrillic letters in my text field). I came across the Problem that i can only write the first letter because of the assignment of the variable.
can someone tell me an easy way to get around that?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
This should solve your purpose :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard(button) {
var newtext = button.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this);"> <input type="button" name="B" value="B" onClick="rukeyboard(this);">
<input name="outputtext">
</form>
</body>
</html>
Here is a fiddle : https://jsfiddle.net/wet32n06/
Try this
function rukeyboard(newtext) {
document.Keyboard.outputtext.value += newtext;
}
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this.value);">
<input type="button" name="B" value="B" onClick="rukeyboard(this.value);">
<input name="outputtext" value="">
</form>
You can also try this solution.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
// var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += document.activeElement.value;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
But personally I will prefer using jquery to associate the functions, as there are lots of input tag and u have to manually call for each input tag.
So One good way will be using jquery.each to loop through all inputs, and bind the function using jquery on to the inputs.
Here is a solution using Jquery
HTML
<body>
<button value="A" name="A">A</button>
<button value="B" name="B">B</button>
<input id="outputtext" name="outputtext">
</body>
JQuery
<script>
$(document).on("click", "button", function() {
$("#outputtext").val($("#outputtext").val() + "" + this.value);
});
</script>

html How can I get multiple instant results from single calculation

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

Categories