I'm trying to create an HTML form that has the user type in expected gain and cost into the input box, click calculate, and the form should calculate and display the net profit and ROI.
So far the form lets me input expected gain and cost, but the calculate button doesn't display the net profit and ROI in the appropriate boxes.
This is what I have so far (only relevant portions included):
// Declare variables
var projectName; // Gets user input for project name
var expectedCost; // Gets user input for cost of project
var expectedGain; // Gets user input for expected gain
var netProfit;
var returnOnInvestment;
function calcNetProfit() {
netProfit = expectedGain - expectedCost; // Calculate net profit
}
function calcReturnOnInvestment() {
returnOnInvestment = netProfit / expectedCost * 100; // Calculate Return on Investment
}
<form>
<label>Project Name</label>
<input>
<br><br>
<label>Cost</label>
<input>
<br><br>
<label>Gain</label>
<input>
<br><br>
<label>Net Profit</label>
<input>
<br><br>
<label>ROI as percentage</label>
<input>
<br><br>
<input type="button" name="calculate" value="Calculate" onclick="calcNetProfit(); calcReturnOnInvestment();"/><br />
</form>
Try to get the value of input type using: document.getElementById("demo").value,
and you can also manipulate the input box using the same line of code:
function calc() {
var projectName = document.getElementById("name").value
var expectedCost = document.getElementById("cost").value
var expectedGain = document.getElementById("gain").value
var netProfit = expectedGain - expectedCost;
document.getElementById("netprofit").value = netProfit;
var returnOnInvestment = netProfit / expectedCost * 100;
document.getElementById("roi").value = returnOnInvestment;
}
<form>
<label>Project Name</label>
<input type="text" id="name">
<br><br>
<label>Cost</label>
<input type="text" id="cost">
<br><br>
<label>Gain</label>
<input type="text"id="gain">
<br><br>
<label>Net Profit</label>
<input type="text" id="netprofit">
<br><br>
<label>ROI as percentage</label>
<input type="text" id="roi">
<br><br>
<input type="button" name="calculate" value="Calculate" onclick="calc();"/><br />
</form>
You are missing the steps on how to get the values for the gain, costs, and net profit.
Read on JavaScript DOM.
Here's the answer in a nutshell.
function calcNetProfit() {
var expectedGain = document.getElementById('gain').value;
var expectedCost = document.getElementById('cost').value;
var netProfit = expectedGain - expectedCost;
document.getElementById('netprofit').value = netProfit;
return netProfit;
}
function calcReturnOnInvestment() {
var expectedCost = document.getElementById('cost').value;
var netProfit = calcNetProfit();
var roi = netProfit / expectedCost * 100; // Calculate Return on Investment
document.getElementById('roi').value = roi;
}
<html>
<form>
<label>Project Name</label>
<input>
<br><br>
<label>Cost</label>
<input id="cost">
<br><br>
<label>Gain</label>
<input id="gain">
<br><br>
<label>Net Profit</label>
<input id="netprofit">
<br><br>
<label>ROI as percentage</label>
<input id="roi">
<br><br>
<input type="button" name="calculate" value="Calculate" onclick="calcNetProfit(); calcReturnOnInvestment();" /><br />
</form>
</html>
to get input value you must use
var projectname = document.querySelector('//id
or class of input id
mustbe #idname and class .classname').value;
and then manipulate with thouse values
also input tag must have type and class or id
<input type="number" class="classname">
Related
I want to calculate this formula (PD)/(2SMYSDFT*E) but when I click calculate Botton nothing happens (ps: I am not an expert )
I put the input and then I click calculate put no answer.
I made some changes on the code but still not working . please can someone edit the code!
<body>
<label for="formulas">Choose a formula:</label>
<select name="formulas" id="formulas">
<option value="free">Pipeline Thickness</option>
</select>
<h2>Enter inputs</h2>
<label for="P">MAOP=</label>
<input type="number" id="P" name="P">
<br>
<label for="D=">Do=</label>
<input type="number" id="D" name="D" >
<br>
<label for="SMYS">SMYS=</label>
<input type="number" id="SMYS" name="SMYS">
<br>
<label for="DF">DF=</label>
<input type="number" id="DF" name="SMYS">
<br>
<label for="T">T=</label>
<input type="number" id="T" name="T">
<br>
<label for="E">E ⅉ=</label>
<input type="number" id="E" name="E ⅉ=" >
<br>
<button type="button" onclick="calculate">calculate</button>
<p id="demo"></p>
<script>
document.getElementById('calculate').addEventListener('click', function() {
var amount = document.getElementById("P").value;
var amount = +P;
var quantity = document.getElementById("D").value;
var quantity = +D;
var amount = document.getElementById("SMYS").value;
var amount = +SMYS;
var amount = document.getElementById("DF").value;
var amount = +DF;
var amount = document.getElementById("T").value;
var amount = +T;
var amount = document.getElementById("E").value;
var amount = +E;
var total = (P * D) / (2 * SMYS * DF * T * E);
document.getElementById("total").value = total;
});
</script>
</head>
</body>
</html>
</form>
I'm trying to make a budget calculator that takes user input for different variables and returns a new value after calculation.
I've tried using an input tag to retrieve values for different variables and calculate a result using a javascript function that displays returns the result as the value of another input tag. I'm new to programming so I'm not sure if this is the right way of going about this.
var inc, rent, vloan, hins, vins, cc, loan, food, gas, entertainment, spending, result;
function calculate() {
inc = document.getElementById("income").value;
rent = document.getElementById("rent").value;
vloan = document.getElementById("vloan").value;
hins = document.getElementById("hinsurance").value;
vins = document.getElementById("vinsurance").value;
cc = document.getElementById("creditcard").value;
loan = document.getElementById("loan").value;
food = document.getElementById("food").value;
gas = document.getElementById("gas").value;
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;
return document.getElementById("result").value = inc - rent - vloan - hins - vins - cc - loan - food - gas - entertainment - spending;
}
<div id="form2">
Enter your income:<br>
<input type="text" id="income"><br> Mortgage/Rent:<br>
<input type="text" id="rent"><br> Vehicle Loan:<br>
<input type="text" id="vloan"><br> Home Insurance:<br>
<input type="text" id="hinsurance"><br> Vehicle Insurance:<br>
<input type="text" id="vinsurance"><br> Credit Card:<br>
<input type="text" id="creditcard"><br> Other Loans:<br>
<input type="text" id="loan"><br> Groceries:<br>
<input type="text" id="food"><br> Gas/Public Transport:<br>
<input type="text" id="gas"><br> Cable/Internet:<br>
<input type="text" id="entertainment"><br> Spending Money:<br>
<input type="text" id="spending"><br>
<button id="cb" onclick="calculate()">Calculate</button>
<div id="answer">
<p>It is suggested that 20% of your income be allocated towards a savings account</p>
<input id="result" type="text" value="">
</div>
</div>
I expected the result after arithmetic operation to be shown in the last input box with the id tag "result"
The input values are of type string. You have to convert them to number before performing any arithmetic operation. You can use parseFloat().
inc = parseFloat(document.getElementById("income").value);
.....
.....
You also forgot to refer the document object in the following statements:
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;
You also do not need to return anything from the function.
Working Code Example:
var inc, rent, vloan, hins, vins, cc, loan, food, gas, entertainment, spending, result;
function calculate(){
inc = parseFloat(document.getElementById("income").value);
rent = parseFloat(document.getElementById("rent").value);
vloan = parseFloat(document.getElementById("vloan").value);
hins = parseFloat(document.getElementById("hinsurance").value);
vins = parseFloat(document.getElementById("vinsurance").value);
cc = parseFloat(document.getElementById("creditcard").value);
loan = parseFloat(document.getElementById("loan").value);
food = parseFloat(document.getElementById("food").value);
gas = parseFloat(document.getElementById("gas").value);
entertainment = parseFloat(document.getElementById("entertainment").value);
spending = parseFloat(document.getElementById("spending").value);
document.getElementById("result").value = inc - rent - vloan - hins - vins - cc - loan - food - gas - entertainment - spending;
}
<div id="form2">
Enter your income:<br>
<input type="text" id="income"><br>
Mortgage/Rent:<br>
<input type="text" id="rent"><br>
Vehicle Loan:<br>
<input type="text" id="vloan"><br>
Home Insurance:<br>
<input type="text" id="hinsurance"><br>
Vehicle Insurance:<br>
<input type="text" id="vinsurance"><br>
Credit Card:<br>
<input type="text" id="creditcard"><br>
Other Loans:<br>
<input type="text" id="loan"><br>
Groceries:<br>
<input type="text" id="food"><br>
Gas/Public Transport:<br>
<input type="text" id="gas"><br>
Cable/Internet:<br>
<input type="text" id="entertainment"><br>
Spending Money:<br>
<input type="text" id="spending"><br>
<button id="cb" onclick="calculate()">Calculate</button>
<div id="answer">
<p>It is suggested that 20% of your income be allocated towards a savings account</p>
<input id="result" type="text" value="">
</div>
You forgot to add document.
before:
entertainment = getElementById("entertainment").value;
spending = getElementById("spending").value;
now: (change into this)
entertainment = document.getElementById("entertainment").value;
spending = document.getElementById("spending").value;
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 new to JavaScript and I need to use the string method all in one html page. I need to make sure user input the data, but I can't get my function calling to work. Any idea? I finished all of it, but just to make sure that one button submit can validate all string method function perfectly.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<h1> Try 1</h1>
<p>Please enter all the field below.</p>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>String Methods</legend>
<p>Using concat()</p>
<input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
<input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>
<p>Using substr()</p>
<input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using lastIndexOf()</p>
<input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>
<p>Using toLowerCase()</p>
<input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>
<p>Using toUpperCase()</p>
<input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>
<p>Using match()</p>
<input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>
<p>Using replace()</p>
<p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
<input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
<input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>
<p>Using split()</p>
<input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using charCodeAt()</p>
<input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using slice()</p>
<input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
</fieldset>
</form>
<div id="answers"></div>
</body>
</html>
This is my JavaScript code:
<script>
function validateEverything(){
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var lin = document.getElementById("lastindex").value;
var sea = document.getElementById("srch").value;
var lca = document.getElementById("lcase").value;
var uca = document.getElementById("ucase").value;
var mat = document.getElementById("match").value;
var ma1 = document.getElementById("match1").value;
var phr = document.getElementById("phrase").value;
var rep = document.getElementById("replce").value;
var re1 = document.getElementById("replce1").value;
var ph1 = document.getElementById("phrase1").value;
var spl = document.getElementById("splt").value;
var cha = document.getElementById("cca").value;
var slc = document.getElementById("slce").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
//lastindexof
var n = lin.lastIndexOf(sea);
//toLowerCase
var lc = lca.toLowerCase();
//toUpperCase
var uc = uca.toUpperCase();
//match
var mc = mat.match(ma1);
//replace
var rp = phr.replace(replce, replce1);
//split
var sp = sp1.split(" ")
//charCodeAt
var cc = cha.charCodeAt(0);
//slice
var sl = slc.slice(1, 5);
show();
}
function show(){
ans.innerHTML = answersHTML();
}
//answers
function answersHTML(){
var ans = document.getElementById("answers").innerHTML;
document.write(con);
document.write(subr);
document.write(n);
document.write(lc);
document.write(uc);
document.write(mc);
document.write(rp);
document.write(sp);
document.write(cc);
document.write(sl);
}
</script>
There are multiple issues in your snippet.In some case there is no DOM element present but still you are doing document.getElementById();
Also how answerHTML will know about con,sub,.... ? They are local to validateEverything function & you are not passing it to answerHTML function
You are using input type = "submit". You need to use event.preventDefault() to stop submission. You are not submitting anything. Rather use input type = "button"
There is also no use of show() function
Everytime you are using document.write, so it will delete anything which is previously written. Instead string concatenation and innerHTML will be fine.
Here is a working snippet with minimum code.
JS
function validateEverything(event){
event.preventDefault();
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
ans.innerHTML = con+" "+subr;
}
HTML
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">
JSFIDDLE
I am trying to get the values from my form into a function and return a value
Here is my function
function createInput(){
var weight;
weight = document.bmiCalc.weight.value;
var height = getElementById('height').value;
input.onclick = function calcBMI()
{
// calculate users BMI
var BMI = weight * 703 / Math.pow(height, 2);
return BMI;
}
document.getElementById("BMI").appendChild();
}
and here is my form code from my html page
<form id="bmiCalc">
<h2> Calculate your Current BMI</h2>
<p><label> Please enter your weight in lbs: <input type="text" name = "weight" id= "weight"></label></p>
<p><label> Please enter your height in inches: <input type="text" name ="height" id="height"></label>
<button type="submit">Submit</button></p>
<p><label> Your current BMI is: <input name="BMI" id="BMI"></label></p>
</form>
Changed your html and js:
http://jsfiddle.net/CQxnx/
html:
<h2> Calculate your Current BMI</h2>
<label> Please enter your weight in lbs:</label> <input type="text" name="weight" id="weight">
<br />
<label> Please enter your height in inches:</label> <input type="text" name="height" id="height">
<br />
<input type="button" value="calculate" onclick="calcBMI();" />
<br />
<div id="msg"></div>
js:
function calcBMI(){
var weight = document.getElementById('weight').value;
var height = document.getElementById('height').value;
// calculate users BMI
var BMI = weight * 703 / Math.pow(height, 2);
var msg = document.getElementById('msg');
msg.innerHTML = 'Your current BMI is:' + BMI;
}
You seem to be a bit off, but you never actually call the createInput function. Even after that, you don't actually append the input button. There is no BMI ID element, and createInput would calculate the weight/height as they are when it's called, not when the button is clicked.
Instead, you should just put the button in the DOM to begin with and bind the calculation function to it.
document.getElementById('calculate').addEventListener('click', function () {
document.getElementById("BMI").textContent =
document.getElementById('weight').value * 703 /
Math.pow(document.getElementById('height').value, 2);
});
http://jsfiddle.net/fsKNb/