I'm trying to configure a live caluator based on the Input of a form field.
My problem is, that I simply can not figure out how I would display the result on the Website.
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
<script type="text/javascript">document.write(ausgabe)</script>
</span>
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
Use this code:
function fun(){
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
document.getElementById("member-kosten").innerHTML = ausgabe;
}
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" onkeyup="fun()" />
<span id="member-kosten">
</span>
Set the html of element member-kosten from the script (last line):
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
document.getElementById("member-kosten").innerHTML = calculate;
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input value="10" class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
</span>
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 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">
I am new to Javascript and I need to print the result for a multiplication function.Can you please help me to do that.
Please find the attached image
Following is the code :
function multiply() {
var a = document.getelemtById("weight").value;
var b = document.getelemtById("cost").value;
var myResult = document.getElementById('result');
var myResult = parseint(a) * parseint(b);
}
<span>
<center>
<h3> Calculation of Shipping charge </h3>
<label for = "weight"> Total Prodcut Weight </label>
<input type = "text" name = "Total Prodcut Weight" id = "weight" > <br>
<br>
<label for = "cost" > Shipping cost(per kg) < /label>
<input type = "text" name = "Shipping cost(per kg)" id = "cost" >
<br>
<br>
<button type = "button" onclick = multiply() > compute </button>
<br>
<div id="result"></div>
enter image description here
As the comments suggested, change getelemtById to getElementById and change parseint to parseInt. I also changed the .innerHTML of #result to display the result.
<script type="text/javascript">
function multiply() {
var a = document.getElementById("weight").value;
var b = document.getElementById("cost").value;
var myResult = document.getElementById('result');
myResult.innerHTML = parseInt(a) * parseInt(b); // removed var
}
</script>
<span>
<center>
<h3>Calculation of Shipping charge</h3>
<label for="weight">Total Prodcut Weight</label> <!-- Prodcut should be Product-->
<input type="text" name="Total Prodcut Weight" id="weight"><br>
<br>
<label for="cost">Shipping cost(per kg)</label>
<input type="text" name="Shipping cost(per kg)" id="cost">
<br>
<br>
<button type="button" onclick=multiply()>compute</button>
</center>
</span>
<br>
<div id="result">
<center>
I have edited your code try
function multiply() {
var a = document.getElementById("weight").value;
var b = document.getElementById("cost").value;
//var myResult = document.getElementById('result');
var myResult = parseInt(a) * parseInt(b);
document.getElementById('result').innerHTML=myResult
console.log(myResult)
}
<h3>Calculation of Shipping charge</h3>
<label for="weight">Total Prodcut Weight</label>
<input type="text" name="Total Prodcut Weight" id="weight"><br>
<br>
<label for="cost">Shipping cost(per kg)</label>
<input type="text" name="Shipping cost(per kg)" id="cost">
<button type="button" onclick=multiply()>compute</button>
<div id="result"></div>
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 have tried a thousand different tutorials and I'm pretty sure my code is correct, yet I can't get this to work. I'm trying to create a calculation that has a different value based on whether the user selects 'yes' or 'no'.
var people = document.getElementById('how-many');
people.onkeyup = function() {
guests = people.value;
if (document.getElementById('leftoversyes').checked) {
feeds = people.value * 2;
} else {
feeds = people.value * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
<form id="calculator">
<p>
<label for="how-many">How many people do you plan to feed?</label>
<br />
<input type="text" maxlength="3" name="how-many" id="how-many" />
</p>
<p>
<label for="leftovers">Would you like to have leftovers?</label>
<br />
<input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" />Yes
<input type="checkbox" name="leftoversno" value="No" id="leftoversno" />No</p>
<p>
<input type="button" value="Calculate" id="calculate" class="btn" />
<input type="reset" value="clear" id="clearcalculator" />
</p>
</form>
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>
It works in that it will give me the multiply of 1.5, but nothing I do can get it to give me the multiply of 2.
Thanks in advance for the help!
You need to add another listener for when the value of <input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" /> changes.
document.getElementById('leftoversyes').onchange = function() {
var guests = document.getElementById('how-many').value;
var feeds;
if (document.getElementById('leftoversyes').checked){
feeds = guests * 2;
} else {
feeds = guests * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
};
Which is identical to the original handler you wrote, so let's refactor it into:
function calculate() {
var guests = document.getElementById('how-many').value;
var feeds;
if (document.getElementById('leftoversyes').checked){
feeds = guests * 2;
} else {
feeds = guests * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
document.getElementById('how-many').onkeyup = calculate;
document.getElementById('leftoversyes').onchange = calculate;
Declare feeds variable , use onchange event of #leftovers element to call same function as onkeyup for #people element
var people = document.getElementById('how-many');
var leftovers = document.getElementById('leftoversyes');
function feeder() {
var feeds;
guests = people.value;
if (document.getElementById('leftoversyes').checked){
feeds = people.value * 2;
} else {
feeds = people.value * 1.5;
}
document.getElementById('turkey-number').innerHTML = guests;
document.getElementById('turkey-weight').innerHTML = feeds;
}
people.onkeyup = feeder;
leftovers.onchange = feeder;
<form id="calculator">
<p>
<label for="how-many">How many people do you plan to feed?</label><br />
<input type="text" maxlength="3" name="how-many" id="how-many" />
</p>
<p>
<label for="leftovers">Would you like to have leftovers?</label><br />
<input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" /> Yes <input type="checkbox" name="leftoversno" value="No" id="leftoversno" /> No</p>
<p><input type="button" value="Calculate" id="calculate" class="btn" />
<input type="reset" value="clear" id="clearcalculator" /></p>
</form>
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>