Disclaimer for possible question ignorance - I am super super green at coding Javascript and I'm looking for some friendly advice.
I am looking to code a very basic calculator for a website. This calculator works out a very simple calculation for heat output requirements for a room based on size. But I want the calculation to alter slightly based on a user selected drop down option, namely if the user wants to input in meters or feet.
Code is (currently) as follows:
function Calculate() {
var a = document.getElementById("height").value;
var b = document.getElementById("width").value;
var c = document.getElementById("depth").value;
var d = +a * +b * +c / 14;
var x = d.toFixed(2);
document.getElementById("result").innerHTML = x;
}
<form style="width:100px;" name="myForm">
<td>
<td>Units:</td>
<td>
<Select name="units">
<option>Metres</option>
<option>Feet</option>
</select>
</td>
</tr>
</form>
<form>
<table>
<tr>
<td style="padding-right:10px;">Height:</td>
<td>
<input style="width:100px;" type="text" name="Height" id="height">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Width:</td>
<td>
<input style="width:100px;" type="text" name="Width" id="width">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Depth:</td>
<td>
<input style="width:100px;" type="text" name="Depth" id="depth">
</td>
</tr>
<br>
<tr>
<td style="padding-right:10px;">
<input type="button" onclick="Calculate()" value="Calculate" />
</td>
</tr>
<tr>
<td style="padding-right:10px;">Heat output required in kW:</td>
<td>
<p id="result"></p>
</td>
</tr>
</table>
</form>
I'm basically looking for the drop down box to change the calculation in 'var d' from the stated calculation to
((+a * +b * +c) *0.03) /14
It's as simple as that. I've read various threads but they don't all seem to quite explain what I'm after.
Any help here would be greatly appreciated.
I would give your select an id then query your select and get the selected option's text. If it's 'Metres' do it one way otherwise do it the other way, like so:
function Calculate() {
var s = document.getElementById("units");
var measure = s.options[s.selectedIndex].text;
var a = document.getElementById("height").value;
var b = document.getElementById("width").value;
var c = document.getElementById("depth").value;
var d;
if(measure=="Metres")
d = +a * +b * +c / 14;
else
d = ((+a * +b * +c) *0.03) /14;
var x = d.toFixed(2);
document.getElementById("result").innerHTML = x;
}
<form style="width:100px;" name="myForm">
<td>
<td>Units:</td>
<td>
<Select name="units" id="units">
<option>Metres</option>
<option>Feet</option>
</select>
</td>
</tr>
</form>
<form>
<table>
<tr>
<td style="padding-right:10px;">Height:</td>
<td>
<input style="width:100px;" type="text" name="Height" id="height">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Width:</td>
<td>
<input style="width:100px;" type="text" name="Width" id="width">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Depth:</td>
<td>
<input style="width:100px;" type="text" name="Depth" id="depth">
</td>
</tr>
<br>
<tr>
<td style="padding-right:10px;">
<input type="button" onclick="Calculate()" value="Calculate" />
</td>
</tr>
<tr>
<td style="padding-right:10px;">Heat output required in kW:</td>
<td>
<p id="result"></p>
</td>
</tr>
</table>
</form>
Related
Trying to create a Javascript for future value calculation. This is the code im using but it is not returning a value. Don't know where the code is wrong. Has user input investment, interest rate, monthly payment added, and terms. After that code how do I create a for loop to create an amortization schedule.
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script language="JavaScript">function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) &&
(monthly != Number.POSITIVE_INFINITY) &&
(monthly != Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
</script>
I don't know what exactly you meant but it return value into input you haven't closed round func and wrong type on script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form name="fv">
<table>
<tr><td colspan="3"><b>Enter Investment Information:</b></td></tr>
<tr>
<td>1)</td>
<td>Amount of the Investment (any currency):</td>
<td>
<input type="text" name="investment" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>2)</td>
<td>percentage rate of interest:</td>
<td>
<input type="text" name="interest" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>3)</td>
<td>Monthly Payment Amount:</td>
<td>
<input type="text" name="monthly" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td>4)</td>
<td>Terms:</td>
<td>
<input type="text" name="terms" size="12"
onchange="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" value="Calculate" onclick="calculate();">
</td>
</tr>
<tr>
<td colspan="3">
<b>Investment Information:</b>
</td>
</tr>
<tr>
<td>4)</td>
<td>Your Investment will be worth:</td>
<td><input type="text" name="payment" size="12"></td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate() {
var investment = document.fv.investment.value;
var interest = document.fv.interest.value / 100 / 12;
var terms = document.fv.terms.value * 12;
var x = Math.pow(1 + interest, terms);
var monthly = (investment * x);
if (!isNaN(monthly) && (monthly !== Number.POSITIVE_INFINITY) &&
(monthly !== Number.NEGATIVE_INFINITY)) {
document.fv.payment.value = round(monthly);
}
else {
document.fv.payment.value = "";
}
}
function round(x) {
return Math.round(x * 100) / 100;
}
</script>
</body>
</html>
In my program I am trying to auto calculate total price when user enter quantity in input box. For that I performed below script. but due to some error my script doesn't working as per expectation and when I enter quantity, total price doesn't get updated. Can anyone tell me what's wrong in my code. I want to perform this script without jquery.
code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form action="" method="POST" name="myForm" id="myForm">
<table bgcolor="pink" align="center" border="2px">
<tbody>
<tr>
<th> Category </th>
<th> Description </th>
<th> Unit Price </th>
<th> Quantity </th>
<th> Total Price</th>
</tr>
<tr>
<td rowspan="2">1</td>
<td> Paneer </td>
<td name="priceQ1"> $10 </td>
<td> <input type="text" size="4" id="q1" name="qty1" onkeyup="calculate()"> </td>
<td> <input type="text" id="total1" name="total1"> </td>
</tr>
<tr>
<td> Rice </td>
<td name="priceQ2"> $30 </td>
<td> <input type="text" size="4" id="q2" name="qty2" onkeyup="calculate()"> </td>
<td> <input type="text" id="total2" name="total2"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total" name="sub_total"> </td>
</tr>
<tr>
<td rowspan="2">2</td>
<td> Chicken Palak </td>
<td name="priceQ3"> $20 </td>
<td> <input type="text" size="4" id="q3" name="qty3" onkeyup="calculate()"> </td>
<td> <input type="text" id="total3" name="total3"> </td>
</tr>
<tr>
<td> Aloo Tikki </td>
<td name="priceQ4 "> $14 </td>
<td> <input type="text" size="4" id="q4" name="qty4" onkeyup="calculate()"> </td>
<td> <input type="text" id="total4" name="total4"> </td>
</tr>
<tr align="right">
<td colspan="4"> Subtotal $ </td>
<td> <input type="text" id="sub_total2" name="sub_total2"> </td>
</tr>
</tbody>
</table>
<p align="center">
<input type="submit" value="Submit">
<input type="reset">
</p>
</form>
<script>
function calculate() {
var f = document.forms['myForm'];
for(var i=0;i<4;i++){
var qty = document.getElementByName('qty'+i);
document.getElementById('total'+i).value = newValue;
}
}
</script>
</body>
</html>
There is no document.getElementsById, you should name your different quantities and total price fields with distinct names and traverse thru them using document.getElementById('qty'+i);
I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();
The Currency converter up top works, but the table based one is a dead duck.
I need a value to be entered at Enter Amount of US Dollars and to be displayed in the corresponding value fields.
Here's the code:
<html>
<head>
<title>Convert US Dollars to Euros 2</title>
</head>
<body>
<form>
<table border="1">
<tbody>
<tr>
<th colspan="3">Monetary Exchange Rates
</th>
</tr>
<tr>
<th>Currency
</th>
<th>Rate
</th>
<th>Value
</th>
</tr>
<tr>
<td>British Pound
</td>
<td><input type="text" style="text-align: right;"
name="bp" value="0.62905" size="12" disabled="true" />
</td>
<td><input type="text" id="BP" value=""></td>
</tr>
<tr>
<td>Canadian Dollar
</td>
<td><input type="text" style="text-align: right;"
name="cd" value="0.98928" size="12" disabled="true" />
</td>
<td><input type="text" id="CD" value=""></td>
</tr>
<tr>
<td>Euro
</td>
<td><input type="text" style="text-align: right;"
name="eu" value="0.79759" size="12" disabled="true" />
</td>
<td><input type="text" id="EU" value=""></td>
</tr>
<tr>
<td>Japanese Yen
</td>
<td><input type="text" style="text-align: right;"
name="jy" value="78.5461" size="12" disabled="true" />
</td>
<td><input type="text" id="JY" value=""></td>
</tr>
<tr>
<td>Mexican Peso
</td>
<td><input type="text" style="text-align: right;"
name="mp" value="13.0729" size="12" disabled="true" />
</td>
<td><input type="text" id="MP" value=""> <!--
td-->
</td>
</tr>
<tr>
<td colspan="2"><b>Enter Amount of U.S. Dollars</b>
</td>
<td>
<input type="text" id="amount" name="amount" size="10" value="1" />
</td>
</tr></tbody>
</table> <br />
<input type="button" value="Calculate" onclick="calculate();">
<input type="reset" value="Reset" />
</form>
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
// var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
var select = document.getElementById("select");
var result = document.getElementById("result");
if(select.options[select.selectedIndex].value=="BP")
if (select.value === "USD to EUR") {
result.value = (amount * 0.7003).toFixed(2);
}
if (select.value === "EUR to USD") {
result.value = (amount * 1.4283).toFixed(2);
}
if (select.value === "0.62905") {
result.value = (amount * 0.62905).toFixed(2);
}
}
</script>
</body>
</html>
Any help would be greatly appreciated.
ID's should be unique, you cannot use same ID multiple times, and your select value does not work, change:
var select = document.getElementById("select");
to
var e = document.getElementById("select");
var select = e.options[e.selectedIndex].value;
Having dropped the select, the script you're looking for is:
<script type="text/javascript">
var BP = '0.62905';
var CD = '0.98928';
var EU = '0.79759';
var JY = '78.5431';
var MP = '13.0729';
function calculate() {
var amount = parseFloat(document.getElementById("amount").value);
document.getElementById("BP").value = (amount * BP).toFixed(2);
document.getElementById("CD").value = (amount * CD).toFixed(2);
document.getElementById("EU").value = (amount * EU).toFixed(2);
document.getElementById("JY").value = (amount * JY).toFixed(2);
document.getElementById("MP").value = (amount * MP).toFixed(2);
}
</script>
We wouldn't want to list those out explicitly like that for anything large-scale; we'd build a list and iterate through it. But I think writing it out this way answers your immediate question better without muddying the waters for you.
Try this code
if(select.options[select.selectedIndex].value=="your value")
I almost have this working however the script is rounding my numbers while I wish to keep both decimals places for a full price instead of being automatically rounded up. My sandbox for this script is here:
http://www.zacharydesigns.com/sandbox/calculatorJS2.html
and here is the code:
<script type="text/javascript">
function update1() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(a/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal1'].value = productTotal;
return false;
}
function update2() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(b/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal2'].value = productTotal;
return false;
}
function update3() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(c/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal3'].value = productTotal;
return false;
}
</script>
<form name="calc" action="#">
<table align="center"
border="1"><tr><td align="right">Boots: </td>
<td align="left"><input type="text" name="productOne" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update1();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal1" size="6"
readonly="readonly" /></td>
</tr>
<tr>
<td align="right">Bindings: </td>
<td align="left"><input type="text" name="productTwo" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update2();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal2" size="6"
readonly="readonly" /></td>
</tr><tr>
<td align="right">Boards: </td>
<td align="left"><input type="text" name="productThree" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update3();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal3" size="6"
readonly="readonly" /></td>
</tr><tr></tr>
</tr>
</table></form>
Can someone please tell me how I can have math operated on the full number without rounding it?
I think that the issue is that you are using the floor operator. The floor operator always rounds down to the nearest integer so:
floor(3.5) == 3
floor(5.9999999999999999999999999999) = 5
floor(5) = 5
And I think you get the drift. That you want to do is format the decimal places and the toFixed() function is for that.
So basically, change these lines:
productTotal = Math.floor(c/(a+b+c)*399.99);
To:
productTotal = (c/(a+b+c)*399.99).toFixed(2);
And I think that will be what you want.