Making a grading calculator using javascript - javascript

<!DOCTYPE html>
<html>
<head>
<title>Grade Calculator</title>
<script>
function doubleMe()
{
var number;
var total;
number = document.getElementById('txtnumber').value;
number = Number(number);
total = number * 2;
console.log("number(): " + number + " " + total);
number = document.getElementById('txtnumber').value;
number = parseInt(number);
total = number * 2;
console.log("parseInt(): " + number + " " + total);
number = document.getElementById('txtnumber').value;
number = parseFloat(number);
total = number * 2;
console.log("parseFloat(): " + number + " " + total);
document.getElementById('divOutput').innerHTML = total;
}
</script>
</head>
<body>
<h1>Grade Calculator</h1>
Term 1 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 2 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 3 Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Final Exam Mark: <input type = 'text' id = 'txtnumber' /><br><br>
Term 1 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
Term 2 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
Term 3 Percentage: <input type = 'text' id = 'txtnumber' /><br><br>
<input type = 'button' value = 'Press Me' onclick = 'doubleMe();' /><br><br>
<div id = 'divOutput'></div>
</body>
</html>
Hi, I'm suppose to be making a Grading calculator where you input your scores and percentages and once you click "press me" it adds up all of your grades and gives you your final grade. But I can't seem to get to work, can someone help me out? please and thank you!


I have made some tweaks into your code where it will take input of Term 1,Term 2, Term 3 & Final Term marks. And will return sum & percentage of them considering marks for each term is out of 100.
<!DOCTYPE html>
<html>
<head>
<title>Grade Calculator</title>
</head>
<body>
<h1>Grade Calculator</h1>
Term 1 Mark: <input type="text" id="txtnumber1" /><br /><br />
Term 2 Mark: <input type="text" id="txtnumber2" /><br /><br />
Term 3 Mark: <input type="text" id="txtnumber3" /><br /><br />
Final Exam Mark: <input type="text" id="txtnumber4" /><br /><br />
Term 1 Percentage: <input type="text" id="txtnumber5" /><br /><br />
Term 2 Percentage: <input type="text" id="txtnumber6" /><br /><br />
Term 3 Percentage: <input type="text" id="txtnumber7" /><br /><br />
<input type="button" value="Press Me" onclick="percentage();" /><br /><br />
<div id="divOutpuTotal"></div>
<div id="divOutputPercentage"></div>
<script>
function percentage() {
var total;
var total =
Number(document.getElementById("txtnumber1").value) +
Number(document.getElementById("txtnumber2").value) +
Number(document.getElementById("txtnumber3").value) +
Number(document.getElementById("txtnumber4").value);
document.getElementById("divOutpuTotal").innerHTML = total;
document.getElementById("divOutputPercentage").innerHTML = total / 4;
}
</script>
</body>
</html>
You can improve logic more based on your specific requirement.

Related

Beginner JavaScript- Results not posting in result box

Hey all i've just begun javascript programming and I can't figure out why my program isn't "doing the math". When I input numbers into the boxes it wont give me results in the result boxes at the bottom. I'm not sure if I need to separate the script into multiple calculations or leave it the way it is. This is my first project with javascript and I am not sure if I missed something or not. Any help will be very appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Financial Formulas</title>
<script type="text/javascript">
function calculateLoan(){
var Profit = parseFloat(document.getElementID("Profit").value);
var AverageNumberOfShares = parseInt(document.getElementById("AverageNumberOfShares").value);
var PricePerShare = parseFloat(document.getElementById("PricePerShare").value);
var TotalAssets = parseFloat(document.getElementID("TotalAssets").value);
var IntangibleAssets = parseFloat(document.getElementID("IntangibleAssets").value);
var Liabilities = parseFloat(document.getElementID("Liabilities").value);
var PricePerShare = parseFloat(document.getElementID("PricePerShare").value);
var EarningsPerShare = parseFloat(document.getElementID("EarningsPerShare").value);
var PERatio = parseFloat(document.getElementID("PERatio").value);
var PercentExpectedGrowth = parseFloat(document.getElementID("PercentExpectedGrowth").value);
var EarningsPerShare;
var PriceToBook;
var PERatio;
var PriceToEarningsGrowth;
EarningsPerShare = Profit / AverageNumberOfShares;
PriceToBook = PricePerShare / (TotalAssets - (IntangibleAssets + Liabilities));
PERatio = PricePerShare / EarningsPerShare;
PriceToEarningsGrowth = PERatio / PercentExpectedGrowth;
document.getElementById("EarningsPerShare").value = EarningsPerShare;
document.getElementById("PriceToBook").value = PriceToBook;
document.getElementById("PERatio").value = PERatio;
document.getElementById("PriceToEarningsGrowth").value = PriceToEarningsGrowth;
}
</script>
</head>
<body>
<h1>Javascript Financial Formulas</h1>
<p>To use, please input financial information and press calculate<p>
<form name="Financial Formulas">
<p>Earnings per share:<p>
Profit:
<input type = "text" id="Profit" name="Profit" value="" /><br />
Average number of shares:
<input type = "text" id="AverageNumberOfShares" name="AverageNumberOfShares" value="" /><br />
<p>Price to Book:<p>
Price per share:
<input type = "text" id="PricePerShare" name="PricePerShare" value="" /><br />
Total Assets:
<input type = "text" id="TotalAssets" name="TotalAssets" value="" /><br />
Intangible Assets:
<input type = "text" id="IntangibleAssets" name="IntangibleAssets" value="" /><br />
Liabilities:
<input type = "text" id="Liabilities" name="Liabilities" value="" /><br />
<p>PE Ratio:<p>
Price per share:
<input type = "text" id="PricePerShare" name="PricePerShare" value="" /><br />
Earnings per share:
<input type = "text" id="EarningsPerShare" name="EarningsPerShare" value="" /><br />
<p>Price to Earnings Growth:<p>
PE Ratio:
<input type = "text" id="PERatio" name="PERatio" value="" /><br />
Percent Expected Growth:
<input type = "text" id="PercentExpectedGrowth" name="PercentExpectedGrowth" value="" /><br />
<input type = "button" id="calculate" name="Calculate" value="Calculate" onclick="calculateLoan();" />
<input type = "reset" id="Reset" name="Reset" value="Reset" /><br />
<br>
Earnings per share:
<input type = "text" id="EarningsPerShare" name="EarningsPerShare:" value="" /><br />
Price to Book:
<input type = "text" id="PriceToBook" name="PriceToBook:" value="" /><br />
PE Ratio:
<input type = "text" id="PERatio" name="PERatio:" value="" /><br />
Price to Earnings Growth:
<input type = "text" id="PriceToEarningsGrowth" name="PriceToEarningsGrowth:" value="" /><br />
</form>
</body>
</html>

If it's your first javascript program, you'll be happy to know there is a console output in browsers. Just press F12 and you'll see the error printed. :)
In your case, the error is about getElementById that you have wrongly spelled getElementId.
Error says :
Uncaught TypeError: document.getElementID is not a function

Trying to calculate a simple discount and sales tax in javascript

I'm just trying to input an number and then add 10% and then take that total and .08% tax. Can you please help me figure out what I'm doing wrong. I sure it is something simple I'm overlooking but I'm new to this and can't figure what is wrong.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Price tool</title>
</head>
<body>
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
<script type="text/javascript">
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
</script>
</body>
</html>

I logged the value of 'cost' in your code when I start with the value 100
var cost = (x * .1) + x;
console.log(cost);
and got a value of '10100'
But if I make sure that x is a number I get the correct value (110)
var cost = (x * .1) + Number(x);
console.log(cost);
And I get 118.8 for the total.

When you retrieve the value from your input control, it comes through as a string value.
var x = form["acertscore"].value; // x is a string
If you convert this to a number immediately you'll avoid additional problems.
var x = Number(form["acertscore"].value); // x is a number
function costCalc() {
var form = document.forms["operation_form"];
var x = Number(form["acertscore"].value);
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = answer;
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name="acertscore" value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>

The problem is that your answer number is so long that it tries to display exponents. Because of this, the number gets treated as a string, though you've specified that the output goes into an <input> field with a type of number. Because your answer is not a number, it can't be displayed.
To resolve this, you can parse the output as a float before displaying it:
form["answerbox"].value = parseFloat(answer);
function costCalc() {
var form = document.forms["operation_form"];
var x = form["acertscore"].value;
var cost = (x * .1) + x;
var answer = (cost * .08) + cost;
form["answerbox"].value = parseFloat(answer);
}
<form name="operation_form">
<label style="font-size:20px"><b>Price Tool</b></label>
<br/>
<br/>
<br/>
<label>Item Price: </label><input type="number" name='acertscore' value="" />
<br/>
<br/>
<label><b>Total is:</b></label><input type="number" name="answerbox">
<br/>
<input type="button" value="Calculate" onclick="costCalc();" />
<br/>
<input type="button" value="Reset" onClick="this.form.reset()" />
</form>
Hope this helps!

Taking html input and generating output

Can someone help me get closer to doing what I am trying to do here? I'm very new at html/javascript (obviously) and really don't know how to ask what I want.
I'm just trying make a template maker for craigslist. Make an easy to use html page to send to people and have them fill in the input fields and have it spit out the html to post into the body of the CL posting block.
Any direction/guidance would be appreciated. I've already spent about 3 hours on this and now don't know what to do.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html xmlns="http://www.w3.org/1999/xhtml"><br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<style type="text/css">
body {margin: 30px;}
</style>
<body style="margin: 10; padding: 10;"><br>
<!--
<script type="text/javascript">
function multiplyBy()
{
var numOne = document.getElementById("length").value;
var numTwo = document.getElementById("width").value;
var numOne = varLength.value;
var numTwo = varWidth.value;
}
function multiplyFunction ()
{
var sqftResult = numOne.value * numTwo.value;
console.log(sqftResult);
document.getElementById("result").innerHTML = sqftResult;
}
</script>
-->
<script>
function scrHTML(){
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var price = document.getElementById("price").value;
var bed = document.getElementById("bedrooms").value;
var bath = document.getElementById("bathrooms").value;
var model = document.getElementById("model").value;
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var sqft = document.getElementById("sqft").value;
var sections = document.getElementById("sections").value;
var newused = document.getElementById("new-used").value;
var feature1 = document.getElementById("featureOne").value;
var feature2 = document.getElementById("featureTwo").value;
var feature3 = document.getElementById("featureThree").value;
var feature4 = document.getElementById("featureFour").value;
var feature5 = document.getElementById("featureFive").value;
var link = document.getElementById("link").value;
var htmlOutput = document.getElementById("htmlOutput");
// htmlOutput.value = "<p> <b><u><h1>Contact info:</u></b> <br> <b>"+ name +" | "+ phone +" </h1></b></p><hr><h1>"+title+"</h1><h2>31905 IH 10 West Boerne TX 78006</h2><h2> Sale By: Agent/Broker</h2><h2>$"+price+"</h2><p><b><big><u>KEY FEATURES</u></big></b><br><b>Sq Footage: </b> " + SQFT + " sqft <br><b>Bedrooms: </b>"+beds+" Bed(s)<br><b>Bathrooms: </b>"+baths+" Bath(s)<br><b>Property Categoty: </b>"+newused+"<br><b>Manufacturer: </b>Oak Creek Homes<br><b>Width: </b>"+width+"<br><b>Length: </b>"+length+"<br><br><b><u>OTHER DETAILS AVAILABLE</u></b><hr><h2><b>"+newused+" 2017 Mobile Home from Oak Creek Homes<br>"+model+"</b><b><h3>Special Online Pricing - contact "+ name +" at "+phone+" for pricing sheet and more info!</b></h3><hr><u><b>Features that come STANDARD:</u></b><ul><li>"+feature1+"</li><li>"+feature2+"</li><li>"+feature3+"</li><li>"+feature4+"</li><li>"+feature5+"</li></ul><hr><b><h2>All this for only $"+price+" - call "+name+" at "+phone+" for more info or to come see the house!</b></h2><hr><ul><li>**Price does not include delivery, setup, or A/C</li></ul><hr>Additional Links: "+ link +"<hr><br><br>mobile home, manufactured home, modular home, tiny home, tiny house, cheap house, cheap home, palm harbor, clayton homes, palm harbor homes, titan direct mobile home, oak creek home, oak creek homes, mobile homes texas, mobile home san antonio, manufactured home san antonio, modular home texas, repo home, repossesssed home, foreclosure, foreclosed, cheap home, cheap house, used home, used house, single wide, double wide, triple wide, titan factory direct";
htmlOutput.value = link
}
</head>
</script>
<form>
Posting Title<br>
<input type="text" name="title" id="title" /><br>
<br>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
Price:
<input type="text" name="price" id="price" /><br>
Bedrooms:
<input type="text" name="bedrooms" id="bedrooms" /><br>
Bathrooms:
<input type="text" name="bathrooms" id="bathrooms" /><br>
Model:
<input type="text" name="model" id="model" /><br>
Length:
<input type="text" name="length" id="length" /><br>
Width:
<input type="text" name="width" id="width" /><br>
Square Feet:
<input type="text" name="sqft" id="sqft" /><br>
Single or Double:
<input type="text" name="sections" id="sections" /><br>
New or Used:
<input type="text" name="new-used" id="new-used" /><br>
Feature 1:
<input type="text" name="featureOne" id="featureOne" /><br>
Feature 2:
<input type="text" name="featureTwo" id="featureTwo" /><br>
Feature 3:
<input type="text" name="featureThree" id="featureThree" /><br>
Feature 4:
<input type="text" name="featureFour" id="featureFour" /><br>
Feature 5:
<input type="text" name="featureFive" id="featureFive" /><br>
Link:
<input type="text" name="link" id="link" /><br>
<input type="button" value="Generate HTML" onclick= "scrHTML()" id="txtOutput" />
<input type="text" id="htmlOutput" />
</form>
</body>
</html>

Maybe this is what you are looking for. I've added a hidden div which will serve as the result container. When the user clicks the button the form will hide and the container with the output will be shown.
I've also cleaned up your code a bit.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<script>
function scrHTML(){
var resultDiv = document.getElementById("result");
var formDiv = document.getElementsByTagName("form")[0];
// the input values
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
// etc..
// here you can put your result html
resultDiv.innerHTML = "<p>" + name + "<br/>" + phone + "</p>";
// hide the form and display the result div
formDiv.style.display = "none";
resultDiv.style.display = "block";
}
</script>
</head>
<body>
<form>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
<input type="button" value="Generate HTML" onclick="scrHTML()" id="txtOutput" />
</form>
<div id="result" style="display: none"> </div>
</body>
</html>
As you can see, the basic HTML structure should be like this:
<html>
<head>
<script></script>
</head>
<body>
<!-- content here -->
</body>
</html>

Thank you for the answers - below is what I've decided to use as the best answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>
<html xmlns="http://www.w3.org/1999/xhtml"><br>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Craigslist Ad Builder</title>
<style type="text/css">
body {margin: 30px;}
</style>
<script type="text/javascript">
<!--
function multiplyBy() {
var numOne = document.getElementById("length").value;
var numTwo = document.getElementById("width").value;
var numOne = varLength.value;
var numTwo = varWidth.value;
}
function multiplyFunction() {
var sqftResult = numOne.value * numTwo.value;
console.log(sqftResult);
document.getElementById("result").innerHTML = sqftResult;
}
function scrHTML() {
var title = document.getElementById("title").value;
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var price = document.getElementById("price").value;
var beds = document.getElementById("bedrooms").value;
var baths = document.getElementById("bathrooms").value;
var model = document.getElementById("model").value;
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var sqft = document.getElementById("sqft").value;
var sections = document.getElementById("sections").value;
var newused = document.getElementById("new-used").value;
var feature1 = document.getElementById("featureOne").value;
var feature2 = document.getElementById("featureTwo").value;
var feature3 = document.getElementById("featureThree").value;
var feature4 = document.getElementById("featureFour").value;
var feature5 = document.getElementById("featureFive").value;
var link = document.getElementById("link").value;
var htmlOutput = document.getElementById("htmlOutput");
htmlOutput.value = "<p> <b><u><h1>Contact info:</u></b> <br> " +
"<b>" + name + " | " + phone + " </h1></b></p>" +
"<hr>" +
"<h1>" + title + "</h1>" +
"<h2>31905 IH 10 West Boerne TX 78006</h2>" +
"<h2> Sale By: Agent/Broker</h2>" +
"<h2>$" + price + "</h2>" +
"<p><b><big><u>KEY FEATURES</u></big></b><br>" +
"<b>Sq Footage: </b> " + sqft + " sqft <br>" +
"<b>Bedrooms: </b>" + beds + " Bed(s)<br>" +
"<b>Bathrooms: </b>" + baths + " Bath(s)<br>" +
"<b>Property Category: </b>" + newused + "<br>" +
"<b>Manufacturer: </b>Oak Creek Homes<br>" +
"<b>Width: </b>" + width + "<br>" +
"<b>Length: </b>" + length + "<br><br>" +
"<b><u>OTHER DETAILS AVAILABLE</u></b>" +
"<hr>" +
"<h2><b>" + newused + " 2017 Mobile Home from Oak Creek Homes<br>" + model + "</b>" +
"<h3><b>Special Online Pricing - contact " + name + " at " + phone + " for pricing sheet and more info!</b></h3>" +
"<hr>" +
"<u><b>Features that come STANDARD:</b></u>" +
"<ul>" +
"<li>" + feature1 + "</li>" +
"<li>" + feature2 + "</li>" +
"<li>" + feature3 + "</li>" +
"<li>" + feature4 + "</li>" +
"<li>" + feature5 + "</li>" +
"</ul>" +
"<hr>" +
"<b><h2>All this for only $" + price + " - call " + name + " at " + phone + " for more info or to come see the house!</b></h2><hr>" +
"<ul>" +
"<li>**Price does not include delivery, setup, or A/C</li>" +
"</ul>" +
"<hr>" +
"Additional Links: " + link + "<hr><br><br>" +
"mobile home, manufactured home, modular home, tiny home, tiny house, cheap house, cheap home, palm harbor, clayton homes, palm harbor homes, titan direct mobile home, oak creek home, oak creek homes, mobile homes texas, mobile home san antonio, manufactured home san antonio, modular home texas, repo home, repossesssed home, foreclosure, foreclosed, cheap home, cheap house, used home, used house, single wide, double wide, triple wide, titan factory direct";
}
//-->
</script>
</head>
<body style="margin: 10; padding: 10;"><br>
<form>
Posting Title<br>
<input type="text" name="title" id="title" /><br>
<br>
Name:
<input type="text" name="name" id="name" /><br>
Phone:
<input type="text" name="phone" id="phone" /><br>
Price:
<input type="text" name="price" id="price" /><br>
Bedrooms:
<input type="text" name="bedrooms" id="bedrooms" /><br>
Bathrooms:
<input type="text" name="bathrooms" id="bathrooms" /><br>
Model:
<input type="text" name="model" id="model" /><br>
Length:
<input type="text" name="length" id="length" /><br>
Width:
<input type="text" name="width" id="width" /><br>
Square Feet:
<input type="text" name="sqft" id="sqft" /><br>
Single or Double:
<input type="text" name="sections" id="sections" /><br>
New or Used:
<input type="text" name="new-used" id="new-used" /><br>
Feature 1:
<input type="text" name="featureOne" id="featureOne" /><br>
Feature 2:
<input type="text" name="featureTwo" id="featureTwo" /><br>
Feature 3:
<input type="text" name="featureThree" id="featureThree" /><br>
Feature 4:
<input type="text" name="featureFour" id="featureFour" /><br>
Feature 5:
<input type="text" name="featureFive" id="featureFive" /><br>
Link:
<input type="text" name="link" id="link" /><br>
<input type="button" value="Generate HTML" onclick= "scrHTML()" id="txtOutput" /><br>
<textarea type="text" id="htmlOutput" style="width:500px;height:300px"></textarea>
</form>
</body>
</html>

Change value of input box based on selected item and other value

So basically, I am creating an application form for gym membership.
The base cost is $100. If juggling is selected, the cost will increase by $50.
Also, the base cost will increase by $50 if the 'BMI' is > 25 and <= 30. If the 'BMI' is > 30, it will increase by $100 instead.
This is my code. It is not working as intended. Would like some help. Thanks a lot.
<!DOCTYPE html>
<html>
<head>
<title>UWS application form</title>
<link rel="stylesheet" href="Prac1Task2.css" />
</head>
<body>
<form>
<fieldset>
<legend>Fitness Details</legend>
Favourite Activities: <br/>
<input type="checkbox" name="activity" value="cycling" id="cycling"><label for="cycling">Cycling</label>
<input type="checkbox" name="activity" value="50" id="juggling" onchange="update(this);"><label for="juggling">Juggling</label>
<br/>
<br/>
<label for="height">What is your height (Meters)</label><br/>
<input type="number" name="height" id="height" class="input" onchange="getBMI()">
<br/>
<label for="weight">What is your weight? (kg)</label><br/>
<input type="number" name="weight" id="weight" class="input" onchange="getBMI()">
<br/>
<label for="bmi">BMI:</label><br/>
<input type="number" name="bmi" id="bmi" class="input" value="" readonly>
<script>
function getBMI()
{
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
document.getElementById("bmi").value = (weight / height) / height;
var bmi = document.getElementById("bmi");
var price = document.getElementById("price").value;
if (bmi.value > 25 && bmi.value <= 30)
{
parseInt(price.value) += parseInt(50);
document.getElementById('price').value = price.value;
}
else if (bmi.value > 30)
{
document.getElementById("price").value = document.getElementById("price").value + 100;
}
}
</script>
</fieldset>
<br/>
<fieldset>
<legend>Application Details</legend>
Date of Application:<br/>
<input class="input" id="date" name="date" readonly />
<script>
var timetime = new Date();
document.getElementById("date").value = (timetime.getDate() + "/" + (timetime.getMonth() + 1)
+ "/" + timetime.getFullYear());
</script>
<br/><br/>
Cost of Application: <br/>
$<input type="number" class="input" id="price" name="price" step="0.01" value="100" readonly />
<script>
var total = 100;
function update(feature) {
if(feature.checked == true){
total += parseInt(feature.value);
document.getElementById('price').value = total;
}
if(feature.checked == false){
total -= parseInt(feature.value);
document.getElementById('price').value = total;
}
}
</script>
</fieldset>
<br/>
<input type="submit" value="Submit" class="button">
</form>
</body>
</html>

You haven't mentioned the exact issue which you are facing. However, I think there should be some problem with this line of code.
parseInt(price.value) += parseInt(50);
parseInt() is a function and you cannot assign values to it.
It should be some thing like this
price.value = parseInt(price.value) + parseInt(50);
Also price.value is not a proper reference because you are assigning document.getElementById("price").value; to it. So you should be using price instead of price.value

JS Average calculator

I cant get everything centered.
this is what i get:
xxx xxx xxx xxx xxx
what I want is
xxx
xxx
xxx
xxx
xxx
centered horizonally in the webpage
I also cant get the average functionality to work.I dont know where I am going 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">
<head>
<title>Average Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<h1 style="text-align:center;">My Average Calculator</h1>
<script type="text/javascript">
function getTotal() {
var form = document.getElementById('number');
var numb1 = parseInt(form.numb1.value);
var numb2 = parseInt(form.numb2.value);
var numb3 = parseInt(form.numb3.value);
var numb4 = parseInt(form.numb4.value);
var numb5 = parseInt(form.numb5.value);
var total = document.getElementById('total');
var average = document.getElementById('average');
if (!numb1) {
numb1 = 0;
}
if (!numb2) {
numb2 = 0;
}
if (!numb3) {
numb3 = 0;
}
if (!numb4) {
numb4 = 0;
}
if (!numb5) {
numb5 = 0;
}
total.innerHTML = 'Total: ' + (numb1 + numb2 + numb3 + numb4 + numb5);
average.innerHTML = 'Average: ' + (total / 5);
}
</script>
</head>
<form id="number">
<body>
First Number: <input type="text" name="numb1" onkeyup="getTotal ();" />
Second Number: <input type="text" name="numb2" onkeyup="getTotal();" />
Third Number: <input type="text" name="numb3" onkeyup="getTotal();" />
Fourth Number: <input type="text" name="numb4" onkeyup="getTotal();" />
Fifth Number: <input type="text" name="numb5" onkeyup="getTotal();" />
<div id="total">Total: </div>
<div id="average">Average: </div>
</body>
</html>

total / 5, where total is an element you fetched by ID. No wonder it doesn't work ;)
Also, you may want to learn about loops. Instead of numb1 through numb5, iterate.
Something like this could work nicely:
<fieldset id="numbers"><legend>Numbers</legend>
First number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Second number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Third number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fourth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" /><br />
Fifth number: <input type="number" onkeyup="getTotal();" onchange="getTotal();" />
</fieldset>
<div id="total">Total: --</div>
<div id="average">Average: --</div>
<script type="text/javascript">
function getTotal() {
var inputs = document.getElementById('numbers').getElementsByTagName('input'),
count = inputs.length, i, total = 0;
for( i=0; i<count; i++) total += parseInt(inputs[i].value || "0",10);
document.getElementById('total').firstChild.nodeValue = "Total: "+total;
document.getElementById('average').firstChild.nodeValue = "Average: "+(total/count);
}
</script>

add BR tag <br/> at the end of every input tag
and change this
average.innerHTML = 'Average: ' + ((numb1 + numb2 + numb3 + numb4 + numb5) / 5);

Categories