I found some code on JSBin (http://jsbin.com/lejoxesari/1/edit?html,js,output) which works like a treat, until I try and adapt it to do more! Now I seem to have an error where it won't calculate the second field.
My edited code can be seen below;
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2015 by anonymous (http://jsbin.com/fivesocaku/1/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table width="80%" border="0">
<tr>
<th>Qty</th>
<th>1.2m</th>
<th></th>
<th>1.8</th>
<th></th>
</tr>
<tr>
<td><input id="qty" type="text" oninput="calculate()" /></td>
<td><input id="R12" type="text" oninput="calculate()" /></td>
<td><input id="b12" type="hidden" value="5" oninput="calculate()" /></td>
<td><input id="R18" type="text" oninput="calculate()" /></td>
<td><input id="B18" type="hidden" value="2" oninput="calculate()" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script id="jsbin-javascript">
function calculate() {
var myBox1 = document.getElementById('qty').value;
var myBox2 = document.getElementById('b12').value;
var result = document.getElementById('R12');
var myResult = myBox1 * myBox2;
result.value = myResult;
var myBox4 = document.getElementById('b18').value;
var result18 = document.getElementById('R18');
var myResult18 = myBox1 * myBox4;
result.value = myResult;
}
</script>
</body>
</html>
I don't seem to be getting any errors reported, but was wondering if someone could take a look and let me know where my error is.
Thanks!
var myBox4 = document.getElementById('b18').value;
b18 must be UPPERCASE
var myBox4 = document.getElementById('B18').value;
you try to get the element by id b18 instead of B18.
Also, you are assigning the value again to result (overriding it), instead to result18.
If I could offer my 2 cents, use more meaningful names for variables, and have some pattern for it (same casing, with/withour numbers etc)
var myBox4 = document.getElementById('b18').value;
You are getting an element id which doesn't exist
var result18 = document.getElementById('R18');
var myResult18 = myBox1 * myBox4;
result.value = myResult;
The last assignment should be result18.value = myResult you are assignig to the same textbox twice.
Related
Ok, so I have this code here and what I am trying to do is read in a character for supersize and if the value is "y" then multiply the price times 1.5 to show fifty percent increase. I'm not really sure where my error is here....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var products=[0,2,3,5,7,8,9,12];
var prices=[3.59,4.99,2.59,1.99,2.99,4.29,3.19,5.29];
var taxes=.06;
var forimages=new Array();
for (var j=0;j<products.length;j++) {
forimages[j]=new Image(200,200);
forimages[j].src="chesssmall.jpg";
}
var thequantity=0;
var thebill=0;
var thetax=0;
var thetotal=0;
var thecode;
var hits=0;
var qbox;
function computebill(form) {
qbox=document.getElementById("quantity");
hits=0;
thecode=parseFloat(form.code.value);
thequantity=parseFloat(form.numbuy.value);
for (var i=0;i<=products.length;i++) {
//why is there an increment thing on the indidual variable below
if (thecode==products[i]){
document.main.src=forimages[i].src;
if(ssize=="y"){
form.price.value=prices[i];
thebill+=(prices[i]*1.5)*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i]*1.5)*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
else{
form.price.value=prices[i];
thebill+=(prices[i])*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i])*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
hits=1;
break;
}
}
if (hits==0) {
form.code.value="Item Not Found";
}
form.code.focus();
form.code.select();
}
</script>
<style type="text/css">
.ql {
background-color: #fff;
}
</style>
</head>
<body>
<div style="float:left">
<form>
<table width="377" border="0">
<tr>
<td width="158">Enter Product Code</td>
<td width="232"><input type="text" name="code" id="code" /></td>
</tr>
<tr>
<td>Quantity Buying</td>
<td><input type="text" name="numbuy" id="numbuy" /></td>
</tr>
<tr>
<td>Supersize?</td>
<td><input type="text" name="ssize" id="ssize" /></td>
</tr>
<tr>
<td>The Price</td>
<td><input type="text" name="price" id="price" /></td>
</tr>
<tr>
<td>Bill</td>
<td><input type="text" name="bill" id="bill" /></td>
</tr>
<tr>
<td>Tax </td>
<td><input type="text" name="tax" id="tax" /></td>
</tr>
<tr>
<td>Total Bill</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" name="forsum" id="forsum" value="Add" onclick="computebill(this.form)"/></td>
</tr>
</table>
</form>
</div>
<img src="window2.jpg" width="200" height="200" name="main" id="main"/>
</body>
</html>
On a stylistic point, rather than:
if(ssize=="y"){
form.price.value=prices[i];
thebill+=(prices[i]*1.5)*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i]*1.5)*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
else{
form.price.value=prices[i];
thebill+=(prices[i])*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=(prices[i])*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
}
do this:
var theprice = prices[i];
if(ssize=="y"){
theprice *= 1.5;
}
form.price.value=theprice;
thebill+=theprice*thequantity;
form.bill.value=thebill.toFixed(2);
thetax+=theprice*thequantity*taxes[i];
form.tax.value=thetax.toFixed(2);
thetotal=thebill+thetax;
form.total.value=thetotal.toFixed(2);
There are two reasons to suggest this. First, your code says what it means -- namely, in one exceptional case, add 50% to the price, but do everything else the same. Second, it's much easier to add a logging or output statement here to debug what's really wrong with your environment.
Cheers.
This Question was a Typo
I am Working on a Wordpress 4.0 site and wanted to add a custom calculator on the Home Page. To help customers calculate their savings. The URL of the Home Page is https://northerncrushing.co.uk . I have tested the same code in a normal HTML page and it works fine. But just when I use in a wordpress page, it stops working. I am using Alterna Theme from themeforest with WooCommerce and Booking System Pro from CodeCanyon. This block is bottom right of my homepage above footer.
The HTML is
<div><form>
<table>
<tbody>
<tr>
<td>Crusher Hire Rate :</td>
<td>£ <input id="hireRate" disabled="disabled" name="hireRate" type="number" value="160" /></td>
</tr>
<tr>
<td>Tons Crushed per Job :</td>
<td> <input id="tonesCrushed" name="tonesCrushed" type="number" value="16" /></td>
</tr>
<tr>
<td>No. of skips SAVED :</td>
<td> <input id="skipsSaved" disabled="disabled" name="skipsSaved" type="number" value="2" /></td>
</tr>
<tr>
<td>Skip Rate :</td>
<td>£ <input id="skipRate" name="skipRate" type="number" value="145" /></td>
</tr>
<tr>
<td>Skip Saving :</td>
<td>£ <input id="skipSaving" disabled="disabled" name="skipSaving" type="number" value="290" /></td>
</tr>
<tr>
<td>Aggregate cost per tonne :</td>
<td>£ <input id="aggregateCost" name="aggregateCost" type="number" value="10" /></td>
</tr>
<tr>
<td>Aggregate SAVED :</td>
<td>£ <input id="aggregateSaving" disabled="disabled" name="aggregateSaving" type="number" value="160" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form></div>
<hr />
<strong>Total SAVING : </strong>£ <input id="totalSaving" disabled="disabled" name="totalSaving" type="number" value="290" />
Calculate
Now the Script is :
<script>
function calculateSavings4000(){
var hr = document.getElementById("hireRate4000").value;
var ton = document.getElementById("tonesCrushed4000").value;
var skiprate = document.getElementById("skipRate4000").value;
var act = document.getElementById("aggregateCost4000").value;
var noskips = Math.ceil(ton/8);
var skipsaving = noskips * skiprate;
var agrsaved = act * ton;
var saving = ((agrsaved + skipsaving) - hr);
var noskip_val = document.getElementById("skipsSaved4000");
noskip_val.value = noskips;
var skipsaving_val = document.getElementById("skipSaving4000");
skipsaving_val.value = skipsaving;
var agrsaved_val = document.getElementById("aggregateSaving4000");
agrsaved_val.value = agrsaved;
var total = document.getElementById("totalSaving4000");
total.value = saving;
}
</script>
Already spent many hours without any luck.
All the help is much appreciated.
The problem is your ID selectors are not set correctly, for instance:
var hr = document.getElementById("hireRate4000").value;
An element with that ID does not exist, I think you want this instead:
var hr = document.getElementById("hireRate").value;
Same thing with your other selectors:
var ton = document.getElementById("tonesCrushed").value;
var skiprate = document.getElementById("skipRate").value;
var act = document.getElementById("aggregateCost").value;
var noskip_val = document.getElementById("skipsSaved");
var skipsaving_val = document.getElementById("skipSaving");
var agrsaved_val = document.getElementById("aggregateSaving");
var total = document.getElementById("totalSaving");
I was able to create the template, but I'm not sure what to do from here.
When I click my add item button, I want the values to go into the text area I created on the bottom and change the subtotal and total as I keep adding items.
<html>
<head>
<meta charset = "utf-8">
<h1>Invoice Manager</h1>
<style type "text/css">
div {position: absolute;
top: 200px;
left: 90px;
z-index: 1;}
</style>
<script type = "text/javascript">
</script>
</head>
<body>
<table>
<tr>
<td align="right">Item Code:</td>
<td align="left"><input type="text" name="code" /></td>
</tr>
<tr>
<td align="right">Item Name:</td>
<td align="left"><input type="text" name="itemName" /></td>
</tr>
<tr>
<td align="right">Item Cost:</td>
<td align="left"><input type="text" name="cost" /></td>
</tr>
<tr>
<td align="right">Quantity:</td>
<td align="left"><input type="text" name="quantity" /></td>
</tr>
</table>
<div id="AddItemButton">
<td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
</div>
</form>
<br></br> <br></br>
<font size = "5">Current Invoice</font>
<hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>
<p><label> <br>
<textarea name = "textarea"
rows = "12" cols = "180"></textarea>
</label></p>
<form>
<table>
<tr>
<td align="right">Subtotal:</td>
<td align="left"><input type="text" name="subtotal" /></td>
</tr>
<tr>
<td align="right">Sales Tax:</td>
<td align="left"><input type="text" name="tax" /></td>
</tr>
<tr>
<td align="right">Total:</td>
<td align="left"><input type="text" name="total" /></td>
</tr>
</table>
</form>
<form>
<input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
</form>
That's what I have as a template. When I type in Item Code, Item Name, Item Cost and Quantity in those fields, I'd like those values to go in the text area on the bottom. I imagine I would need to write something in the script.
I'm not sure how to achieve this, but I was thinking that the first batch of info the user adds could equal a variable like a
Then the second values inputted could equal b
So let's say the user adds 3 items.
total = (a + b + c)
Or something like that.
Here's an example of what one "Add Item" would do. I'd like these submissions to appear in the text field I created like so
---Item Code--- ---Item Name--- ---Item Cost--- ---Quantity---
3 Dell 499 1
Any ideas on what I could do? I'm at a loss
Thanks
EDIT: I'm adding my script, I'm wondering if there's something wrong with it
<script type = "text/javascript">
function computeCost(){
var code = document.getElementById("code").value;
var a = code; // item code
var itemName = document.getElementById("itemName").value;
var b = itemName; // item name
var cost = document.getElementById("cost").value;
var c = cost; // calculate cost
var quantity = document.getElementById("quantity").value;
var d = quantity; // calculate quantity of items
var subtotal = document.getElementById("subtotal").value;
var e = c * d; // multiplying cost by quantity = subtotal
var tax = document.getElementById("tax").value;
var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed
var total = document.getElementById("total").value;
var g = f + e; //adding tax to subtotal = total value
document.getElementByID("yo").value = total;
}
function clear()
{
document.getElementById("a","b","c","d", "e", "f", "g").reset();
} // end of clear
</script>
I dont have much time to give a polished script, but this provides basic functionality
EDIT: added script tags and basic JQUERY things
note that because of loading JQUERY from the internet, it wont work without internet connection, if you wish to use it without internet con, download the script and link it locally
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type = "text/javascript">
$(function(){
var textContent = $('textarea').val();
var textRow = "";
$('input[type=submit]').click(function(){
$('input[type=text]').each(function(){
textRow = textRow+$(this).val()+'\t';
});
textContent = textContent + '\n' + textRow;
textRow = "";
$('textarea').val(textContent);
});
});
</script>
this is just the necessary JS and HTML, nothing fancy:
function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
val1 = parseInt(id("t1").value);
val2 = parseInt(id("t2").value);
id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}
<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>
I'm working on creating a page in which someone could calculate their Net Worth by entering various values. The input text will show a .00 afterwards if no decimal point is added in. I'm having troubles in getting a sum of all of the values.
Java:
<script type="text/javascript"><!--
function updatesum() {
document.form.TotalAssets.value = (document.form.CashOnHand.value -0) + (document.form.CashInChecking.value -0);
}
//-->
</script>
HTML:
<input type="text" onblur="if(this.value.indexOf('.')==-1)this.value=this.value+'.00'" onchange="format(this); updatesum()" onkeyup="format(this)" maxlength="11" value="0" name="CashOnHand" /></td>
</tr>
<tr>
<td><strong>Cash in Checking</strong></td>
<td>$
<input type="text"
onblur="if(this.value.indexOf('.')==-1)this.value=this.value+'.00'" onchange="format(this); updatesum()" onkeyup="format(this)" maxlength="11" value="0" name="CashInChecking" /></td>
</tr>
<tr>
<td align="right"><strong>Total Assets</strong></td>
<td>$<input name="TotalAssets" readonly ></td>
</tr>
It's not giving me a sum of the the values that I'm adding.
I think this is because document.form is undefined, but this one works:
function updatesum() {
var hand = parseFloat(document.forms[0].CashOnHand.value);
var checking = parseFloat(document.forms[0].CashInChecking.value);
document.forms[0].TotalAssets.value = hand - checking;
}
Trying to pull information from my form input fields and calculate them using JavaScript. It does not seem to be working.
HTML (default1.html)
<script type="text/javascript" src="multiplication.js" language="javascript"></script>
<form>
<table>
<tr><!--Row 2-->
<td class="tdSize7">
<input class="input" name="name1" type="text"/>
</td>
<td class="tdSize7">
<input class="input" name="source1" type="text"/>
</td>
<td class="tdSize8">
<p>$</p>
</td>
<td class="tdSize9">
<input class="input" name="income1" type="text"/>
</td>
<td class="tdSize8">
<p>X12</p>
</td>
<td class="tdSize8">
<p>$</p>
</td>
<td class="tdSize9">
<input name="ann1" disabled="disabled"/>
</td>
</tr>
<td class="tdSize9"><input class="inputSize2" name="" type="button" value="Calculate" onclick="addme(this.form)"/></td>
</table>
</form>
JavaScript (multiplication.js)
function addme(form) {
//Constant Variables
const twelve = Number (12);
const fourHun = Number (400);
const fourHunEighty = Number (480);
//Monthly Income 1
var income1 = Number(frm.income1.value);
var val = income1 * twelve;
frm.ann1.value = val;
}
My JavaScript will not calculate and input my results back into my form.
This is just a sample of my code. I am hoping this will tell you enough and help you, in helping me fixing my problem.
Did you intend to use form instead of frm? That is part of your problem
Try:
var income1 = Number(form.income1.value);
var val = income1 * twelve;
form.ann1.value = val;
Or change
function addme(form)
to
function addme(frm)