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
Related
<!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.
I'm trying to create a ‘customer’ object that will store all of this data and then display the information as a ‘Customer Order’ similar with listing all the new information.
I can't figure out what's the problem. (Pretty sure the whole code itself is messed up)
When I run it, it also shows 'ReferenceError: clicked is not defined' message.
I don't understand the concept of storing data and displaying new information as a 'Customer Order'.
This is my javascript.
/*index.js*/
var objectarray = [];
function addToArray() {
var customerobject = {
name: "",
address: "",
postalcode: "",
phone: "",
email: ""
}
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
document.getElementById("buttonandchecks").addEventListener("click", clicked);
function clicked() {
addToArray();
}
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
function buttonandchecks()
{
//javascripts to get an output based on customer information
}
> ------------------------Below is my html------------------------
<!DOCTYPE html>
<html>
<head>
<link href="this.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="this.js">
</script>
</head>
<body>
<br>
<form name="information">
<table>
<tr><td>; First and Last Name :;</td><td><input type="name" id="nameid" size="25" maxlength="25" autofocus="yes" pattern="[a-zA-Z -]+$"></td></tr>
<tr><td>; Address :;</td><td><input type="address" id="addressid" size="25" maxlength="25" pattern="[a-zA-Z0-9]| |/|,|.|\|#|#|$|%|&)+"></td></tr>
<tr><td>; Phone Number :;</td><td><input type="tel" size="25" id="phoneid" placeholder="XXX XXX XXXX" pattern="\d{3} \d{3} \d{4}"></td></tr>
</form>
<form name=order>
//javascript to get an customer information
<br>
<br>
<center><input type=button value="Price your Order" id="clickMe" onClick="clicked();"></center>
</form>
</body>
</html>
I fixed your code, but there is a lot more to this question. This isn't really a proper way to store the data. You should be posting the information from the form to a service.
<html>
<body>
<input id="name" value="Jenna" />
<input id="address" value="840 9STREET" />
<input id="postalcode" value="T2P 2T4" />
<input id="phone" value="111-111-1111" />
<input id="email" value="Renee#gmail.com" />
<button id="clickMe">click me</button>
</body>
<script>
var objectarray = [];
var button = document.getElementById("clickMe");
function addToArray() {
var customerobject = {};
customerobject.name = document.getElementById("name").value;
customerobject.address = document.getElementById("address").value;
customerobject.postalcode = document.getElementById("postalcode").value;
customerobject.phone = document.getElementById("phone").value;
customerobject.email = document.getElementById("email").value;
objectarray.push(customerobject);
console.log(objectarray);
}
button.addEventListener("click", addToArray);
</script>
</html>
Basically I want to count and display the amount of months it would take to get to a certain point (savings balance) based on a contribution every month.
Here is what I have so far:
function howLong(initial,interest,goal,added){
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit+contribution
}
alert(monthCount)
}
Here is my html form:
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value),document.getElementById('contribution').value">
</form>
You need to add the value of contribution to initialDeposit.
initialDeposit += contribution;
For the other problem, you have an error in the call of the function
document.getElementById('goal').value),document.getElementById('contribution').value"
^ >>>>>>>>>>>>>>>> should go >>>>>>>>>>>>>>>>> ^
shold be
onclick="howLong(
document.getElementById('initial').value,
document.getElementById('interest').value,
document.getElementById('goal').value,
document.getElementById('contribution').value
)"
The last round bracket is closing to early.
function howLong(initial, interest, goal, added) {
var initialDeposit = parseInt(initial);
var interestInt = parseInt(interest);
var targetSaving = parseInt(goal);
var contribution = parseInt(added);
var monthCount = 0;
while (initialDeposit <= targetSaving) {
monthCount++;
initialDeposit += contribution;
}
alert(monthCount)
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br /> Interest:
<br />
<input type="number" id="interest"><br /><br /> Target savings amount:<br />
<input type="number" id="goal"><br /><br /> Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong(document.getElementById('initial').value,document.getElementById('interest').value,document.getElementById('goal').value,document.getElementById('contribution').value)">
</form>
Change to initialDeposit += contribution;
As other answers have pointed out initialDeposit += contribution will solve the issue, but you don't need a loop here at all:
var monthCount = Math.ceil((targetSaving - initialDeposit)/contribution);
This is presuming that the contribution is constant, of course.
You were missing += operator and interest as well.
function howLong(){
var initialDeposit = parseInt(document.getElementById('initial').value);
var interestInt = parseInt(document.getElementById('interest').value);
var targetSaving = parseInt(document.getElementById('goal').value);
var contribution = parseInt(document.getElementById('contribution').value);
var monthCount = 0;
while(initialDeposit <= targetSaving){
monthCount++;
initialDeposit += contribution + interestInt; //+= was missing and interestInt as well
}
alert(monthCount);
}
<form>
Initial Deposit:<br />
<input type="number" id="initial"><br /><br />
Interest:<br />
<input type="number" id="interest"><br /><br />
Target savings amount:<br />
<input type="number" id="goal"><br /><br />
Monthly Contribution:<br />
<input type="number" id="contribution"><br /><br />
<input type="button" value="How Long!?" onclick="howLong()">
</form>
How do I display something like a recommendation list after a user calculate a result from the inputs? E.g having the user to key in the salaries of the family and calculating the PCI (Per capita income) and after they key in and press on the calculate button which then will trigger a list of recommendations based on the amount of PCI the family have (Maybe tables that shows different results based on different categories of PCI?)
<!DOCTYPE html>
<html>
<head>
<script src="common.js"></script>
<script>
function cal()
{
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var total = (parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
document.getElementById('total').value = total;
alert (total);
}
</script>
</head>
<body>
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" value="" placeholder="Enter your 4th family income..."/>
<input id="members" value="" placeholder="Enter the total number of family members..."/>
<br>
<button onclick="cal()"> Calculate PCI!</button>
<br>
Total: <input id="total"> </input>
</body>
</html>
You can create a hidden div that holds the data then show that div when user clicks the button
HTML:
<div id="divToShow" style="display:none;" class="table_list" >
//put your data table here
</div>
<input type="button" name="myButton" value="Show Div" onclick="showDiv()" />
Javascript:
function showDiv() {
document.getElementById('divToShow').style.display = "block";
}
This should get you there: Jsfiddle.
<form id="form">
<input id="number1" type="number" min="1" name="number" placholder="add value one"> +
<input id="number2" type="number" min="1" name="number" placholder="add value one">
<button>Submit</button>
</form>
var form = document.getElementById('form');
number1 = document.getElementById('number1');
number2 = document.getElementById('number2');
form.onsubmit = function() {
var total = +number1.value + +number2.value; // add + before
alert( total );
};
function cal(){
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var recommanted;
var recommandations=[
{maxpci:1000,recommandation:'first_recommandation'},
{maxpci:2000,recommandation:'second_recommandation'},
{maxpci:3000,recommandation:'third_recommandation'},
{maxpci:6000,recommandation:'fourth_recommandation'}
];
var total=(parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
if(recommandations[recommandations.length - 1].maxpci < total ){recommanted=recommandations[recommandations.length - 1].recommandation;}
else{
for (var i = 0; i < recommandations.length; i++) {
if(total <= recommandations[i].maxpci){
recommanted=recommandations[i].recommandation;break;}
}}
document.getElementById('result').innerHTML = "Your PCI : "+total+"</br>Recommandation : "+recommanted;
}
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" type="number" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" type="number" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" type="number" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" type="number" value="" placeholder="Enter your 4th family income..."/>
<input id="members" type="number" value="" placeholder="Enter the total number of family members..."/>
</br>
<button onclick="cal()"> Calculate PCI!</button>
</br>
<div id="result">
</div>
I'm building a time tracking system. Users would enter hours worked during the week. We have biweekly pay periods (2 weeks). Once daily hours have been entered, onChange is used trigger a javascript function that calculates weekly total and outputs it to read-only input text boxes (txtWeek1Total and txtWeek2Total). That part works.
The next step is to automatically calculate the pay period total (week 1 + week 2) based on the input values from txtWeek1Total and txtWeek2Total. Currently, I'm using onChange on these text boxes but it does not fire. It gets triggered only if I manually input a value into the weekly total text boxes. Even if these values get updated automatically when the user enter daily hours.
html:
<input type="text" id="week1SundayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1MondayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1TuesdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1WednesdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1ThursdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1FridayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1SaturdayTotal" onChange="calculateWeeklyHours('week1');" /><br />
<input type="text" id="week1WeekTotal" onChange="calculateTotal();" /><br /><br />
<input type="text" id="week2SundayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2MondayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2TuesdayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2WednesdayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2ThursdayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2FridayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2SaturdayTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="week2WeekTotal" onChange="calculateWeeklyHours('week2');" /><br />
<input type="text" id="Total" />
javascript:
function calculateWeeklyHours(week) {
var sunday = document.getElementById(week + 'SundayTotal').value;
var monday = document.getElementById(week + 'MondayTotal').value;
var tuesday = document.getElementById(week + 'TuesdayTotal').value;
var wednesday = document.getElementById(week + 'WednesdayTotal').value;
var thursday = document.getElementById(week + 'ThursdayTotal').value;
var friday = document.getElementById(week + 'FridayTotal').value;
var saturday = document.getElementById(week + 'SaturdayTotal').value;
var weekTotal = document.getElementById(week + 'WeekTotal');
weekTotal.value = Number(sunday) + Number(monday) + Number(tuesday) + Number(wednesday) + Number(thursday) + Number(friday) + Number(saturday);
}
function calculateTotal() {
var week1 = document.getElementById('w1WeekTotal').value;
var week2 = document.getElementById('w2WeekTotal').value;
var total = document.getElementById('Total');
total.value = Number(week1) + Number(week2);
}
Use onkeyup event instead of onchange event - check this (http://jsfiddle.net/JrDd3/2/)
Just call the calculateTotal function at the end of the calculateWeeklyHours function
Example: http://jsfiddle.net/JrDd3/