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")
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>
i want to inset my javascript id in to the place of input value .
if i give Interest name input value="100"
how can i get tc named table input value="75"
my input form
<tr>
<th>Loan Amount</th>
<th>INTEREST RATE %</th>
<tr>
<tbody>
<td><input disabled type="" name="tc" id="int_amount" class="formcontrol"value=""/></td>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate();"/ class="form-control" value=""/></td>
</tr>
</tbody>
javascript
var vatti = document.pricecal.Interest.value;
var Total = vatti -25;
if(vatti = null)
{
document.getElementById("int_amount").innerHTML = "Rs:"+" "+Total;
}
[want out put like this][1]
Hope this helps you.
function calculate(interest){
var vatti = interest.value;
if (vatti != '') {
var Total = vatti - 25;
document.getElementById("int_amount").value = Total;
}else{
document.getElementById("int_amount").value = '';
}
}
<table>
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" onkeyup="calculate(this)" onchange="calculate(this)" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
</table>
Set the .value of the <input> element, not the .innerHTML
document.getElementById("int_amount").value = "Rs:"+" "+Total;
HTML:
<tbody>
<tr>
<td><input type="number" name="Interest" id="input2" class="form-control" value=""/></td>
<td><input type="" name="tc" id="int_amount" class="formcontrol" value=""/></td>
</tr>
</tbody>
Javascript:
document.getElementById('input2').onkeyup = function() {
document.getElementById('int_amount').value = (this.value != '') ? 'Rs: ' + (parseInt(this.value)-25) : '';
}
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>
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();
I have a Google SideBar populated from a HTML file. This has a button that when pressed passes a number of values from the Form to the Google Apps Script that then deals with the data before passing it to a Google Sheet.
Everything works fine except for 1 thing:
The slide bar that I have created does not pass the value along with all of the other aspects.
Can anyone explain why?
I have an extensive amount of code so what you will see is only the relevant cut down required amount.
HTML:
<form id="form1">
<br>
<table width="100%">
<tr>
<td><p>Action Description: </p></td>
<td colspan="3"> <textarea id="description" name="description" rows="15" cols="22" required> </textarea> </td>
</tr>
<tr>
<td><p>Current Completion Percentage: </p></td>
<td>
<input type="range" min="0" max="100" value="0" id="percent" step="10" onchange="outputUpdate(value)" list="perstep">
<datalist id="perstep">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>1000</option>
</datalist>
</td>
<td>
<p><output for="form1" id="level">0</output>%</p>
</td>
</tr>
<tr>
<td><p>Assigned To: </p></td>
<td colspan="3"> <input id="assignedto" name="assignedto" type="text" required /> </td>
</tr>
<tr>
<td><p>Action Number: </p></td>
<td colspan="3"> <input id="actionnum" name="actionnum" type="number" /> </td>
</tr>
</table>
<br>
<hr>
<table width="100%">
<tr>
<td align="center" colspan="3" height="40">
<input id="date" name="date" type="date" required />
<br>
</td>
</tr>
<tr>
<td>
<input onclick="formSubmit()" type="button" value="Submit" />
</td>
<td>
<input onclick="google.script.host.close()" type="button" value="Close" /><br>
</td>
<td>
<input onclick="clearAll()" type="button" value="Clear All" name="clear" /><br>
</td>
</tr>
</table>
</form>
Google .gs Code:
function getValuesFromForm(form1){
var ss = SpreadsheetApp.getActiveSpreadsheet(),
sheet = ss.getSheetByName('Action Plan'),
sheet2 = ss.getSheetByName('Problem Details'),
description = form1.description,
percent = form1.percent,
assignedto = form1.assignedto,
actionnum = form1.actionnum,
date = form1.date,
oldNum = sheet2.getRange(11, 1).getValue(),
today1 = Utilities.formatDate(new Date(),"GMT","dd/MM/yyyy"),
lastCol = sheet.getLastColumn(),
lastRow = sheet.getLastRow(),
datecheck = sheet.getRange(1,lastCol).getValue();
if(description == "" || assignedto == "" || date == ""){
SpreadsheetApp.getUi().alert('Please ensure you have completed the minimal required fields');
} else {
if(datecheck == Utilities.formatDate(new Date(),"GMT","dd/MM/yyyy")) {
sheet.appendRow([oldNum +1, description, percent + " %", assignedto,date]);
sheet.getRange(lastRow +1,lastCol).setValue("New Action");
var head = sheet.getRange(1,1,1,lastCol);
head.setBackground("#b4a7d6");
head.setFontColor("white");
head.setFontWeight("bold");
head.setFontSize(12);
sheet2.getRange(11, 1).setValue(oldNum + 1);
} else {
sheet.getRange(1,lastCol + 1).setValue(today1);
sheet.appendRow([oldNum +1, description, percent + " %", assignedto,date]);
sheet.getRange(lastRow +1,lastCol +1).setValue("New Action");
var head = sheet.getRange(1,1,1,lastCol + 1);
head.setBackground("#b4a7d6");
head.setFontColor("white");
head.setFontWeight("bold");
head.setFontSize(12);
sheet2.getRange(11, 1).setValue(oldNum + 1);
}
}
}
All I get at the moment is "unspecified".
Any help will be appreciated.
The element that creates the slide bar, <input type="range" min="0" max="100" value="0" id="percent" step="10" onchange="outputUpdate(value)" list="perstep">, lacks a name attribute, so it never gives any contribution to the submitted data. So add a name attribute with a suitable value.