I am trying to create a table that will generate numbers to round to a specified place value. The table (in HTML code) is shown below.
<table border = "1">
<col width = "25">
<col width = "150">
<col width = "100">
<col width = "100">
<col width = "50">
<tr><td> </td><td>Place Vaue</td><td>Value</td><td></td></tr>
<tr><td>a.</td><td><span id = "roundingQuestion1"></span></td><td><span id = "placeValue1"></span></td><td></td></tr>
<tr><td>b.</td><td><span id = "roundingQuestion2"></span></td><td><span id = "placeValue2"></span></td><td></td></tr>
<tr><td>c.</td><td><span id = "roundingQuestion3"></span></td><td><span id = "placeValue3"></span></td><td></td></tr>
<tr><td>d.</td><td><span id = "roundingQuestion4"></span></td><td><span id = "placeValue4"></span></td><td></td></tr>
<tr><td>d.</td><td><span id = "roundingQuestion5"></span></td><td><span id = "placeValue5"></span></td><td></td></tr>
<tr><td>e.</td><td><span id = "roundingQuestion6"></span></td><td><span id = "placeValue6"></span></td><td></td></tr>
<tr><td>f.</td><td><span id = "roundingQuestion7"></span></td><td><span id = "placeValue7"></span></td><td></td></tr>
<tr><td>g.</td><td><span id = "roundingQuestion8"></span></td><td><span id = "placeValue8"></span></td><td></td></tr>
<tr><td>h.</td><td><span id = "roundingQuestion9"></span></td><td><span id = "placeValue9"></span></td><td></td></tr>
<tr><td>i.</td><td><span id = "roundingQuestion10"></span></td><td><span id = "placeValue10"></span></td><td></td></tr>
</table>
<br />
<br />
<button onclick="createRoundingQuestions()">Create Questions</button>
The javascript file that I am using to do this is:
var placeValueName = ["Thousandth", "Hundredth", "Tenth", "Ones", "tens", "Hundreds", "Thousands", "Ten Thousands", "Hundred Thousands"];
function getRndInteger(min, max){
return Math.floor(Math.random() * (max - min) ) + min;
}
function createRoundingQuestions(){
var j;
var x;
var numberDecimals;
var lowValue;
var highValue;
for (j = 1; j <= 10; j++){
x = getRndInteger(0, placeValueName.length, 0);
document.getElementById("roundingQuestion"+j).innerHTML = placeValueName[x];
document.getElementById("number"+j).innerHTML = x;
if (x >= 5){
lowValue = Math.pow(10, x - 3);
highValue = Math.pow(10, x - 2);
numberDecimals = getRndInteger(0, 6);
} else if (x >= 3) && (x < 5){
lowValue = 1;
highValue = 1000;
numberDecimals = getRndInteger(1, 3);
} else {
lowValue = 1;
highValue = 1000;
numberDecimals = getRndInteger(2, 6);
}
document.getElementById("placeValue"+j).innerHTML = (Math.random() * (highValue - lowValue) ) + lowValue).tofixed(numberDecimals);
}
}
The first part of the javascript file works. It will add the place value (thousands, hundreds, tens, etc.) to each row of the table. However, when I include the If Statement to detemine the number and the proper number of decimal places, the output is a blank table that will not populate. I would appreciate if anyone could point out what I am doing wrong and suggest how to fix it.
here it is, you got a lot of missing code / typos...
var placeValueName = ["Thousandth", "Hundredth", "Tenth", "Ones", "tens", "Hundreds", "Thousands", "Ten Thousands", "Hundred Thousands"];
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
function createRoundingQuestions() {
var j;
var x;
var numberDecimals;
var lowValue;
var highValue;
for (j = 1; j <= 10; j++) {
x = getRndInteger(0, placeValueName.length, 0);
document.getElementById("roundingQuestion" + j).innerHTML = placeValueName[x];
document.getElementById("number" + j).innerHTML = x;
if (x >= 5) {
lowValue = Math.pow(10, x - 3);
highValue = Math.pow(10, x - 2);
numberDecimals = getRndInteger(0, 6);
} else if ((x >= 3) && (x < 5)){
lowValue = 1;
highValue = 1000;
numberDecimals = getRndInteger(1, 3);
} else {
lowValue = 1;
highValue = 1000;
numberDecimals = getRndInteger(2, 6);
}
document.getElementById("placeValue" + j).innerHTML = (Math.random() * (highValue - lowValue)) + (lowValue).toFixed(numberDecimals);
}
}
<table border="1">
<col width="25">
<col width="150">
<col width="100">
<col width="100">
<col width="50">
<tr>
<td> </td>
<td>Place Vaue</td>
<td>Value</td>
<td></td>
</tr>
<tr>
<td>a.</td>
<td><span id="roundingQuestion1"></span></td>
<td><span id="placeValue1"></span></td>
<td><span id="number1"></span></td>
</tr>
<tr>
<td>b.</td>
<td><span id="roundingQuestion2"></span></td>
<td><span id="placeValue2"></span></td>
<td><span id="number2"></span></td>
</tr>
<tr>
<td>c.</td>
<td><span id="roundingQuestion3"></span></td>
<td><span id="placeValue3"></span></td>
<td><span id="number3"></span></td>
</tr>
<tr>
<td>d.</td>
<td><span id="roundingQuestion4"></span></td>
<td><span id="placeValue4"></span></td>
<td><span id="number4"></span></td>
</tr>
<tr>
<td>d.</td>
<td><span id="roundingQuestion5"></span></td>
<td><span id="placeValue5"></span></td>
<td><span id="number5"></span></td>
</tr>
<tr>
<td>e.</td>
<td><span id="roundingQuestion6"></span></td>
<td><span id="placeValue6"></span></td>
<td><span id="number6"></span></td>
</tr>
<tr>
<td>f.</td>
<td><span id="roundingQuestion7"></span></td>
<td><span id="placeValue7"></span></td>
<td><span id="number7"></span></td>
</tr>
<tr>
<td>g.</td>
<td><span id="roundingQuestion8"></span></td>
<td><span id="placeValue8"></span></td>
<td><span id="number8"></span></td>
</tr>
<tr>
<td>h.</td>
<td><span id="roundingQuestion9"></span></td>
<td><span id="placeValue9"></span></td>
<td><span id="number9"></span></td>
</tr>
<tr>
<td>i.</td>
<td><span id="roundingQuestion10"></span></td>
<td><span id="placeValue10"></span></td>
<td><span id="number10"></span></td>
</tr>
</table>
<br />
<br />
<button onclick="createRoundingQuestions()">Create Questions</button>
Related
Because I'm too lazy to calculate every time I decided to make a calculator with jquery.
For some reason it's not working and I don't know why so I'm here to ask you guys for help.
Here's a jsfiddle link
Damage Formula:
AbaseEq: Damage Range of weapon (e.g: 800~1000)
up difference: weapon up- armor up (e.g: 5-3:2 -> up difference:2 -> 15% if difference was 1 it would be 10%)
Aeq: AbaseEq(1+up difference in %)
Codes:
<table>
<tr>
<td>
<label>Base Attack (Without any equipment equipped): </label>
</td>
<td>
<input placeholder="e.g: 290" id="abase">
</td>
</tr>
<tr>
<td>
<label>Weapon Attack Range: </label>
</td>
<td>
<input placeholder="e.g: 800-1000" id="abaseeq">
</td>
</tr>
<tr>
<td>
<label>Weapon + ?</label>
</td>
<td>
<input placeholder="e.g: 9" id="weapon+">
</td>
</tr>
<tr>
<td>
<label>Enemy Defence + ? </label>
</td>
<td>
<input placeholder="e.g: 6" id="enemydef+">
</td>
</tr>
<tr>
<td>
<button id="calculate">
Calculate
</button>
</td>
<td>
<div id="result"></div>
</td>
</tr>
</table>
$(document).ready(function() {
$('#calculate').on('click', function() {
var abase = $('#abase').val();
var abaseEq = $('#abaseeq').val();
var abaseEqLength = abaseEq.length;
abaseEqLength -= 1;
var weaponlvl = $('#weaponup').val();
var enemydeflvl = $('#enemydefup').val();
var weaponup=parseInt(weaponlvl);
var enemydefup=parseInt(enemydeflvl);
var updifference = weaponup - enemydefup;
var plusdifference = [0, '10%', '15%', '22%', '32%', '43%', '54%', '65%', '90%', '120%', '200%'];
var negdifference = {};
var result;
var aeqmin=0;
var aeqmax=0;
var lowestdamage="";
var maxdamage="";
var negindex;
var negindexplus = 0;
for (var i = 0; i <= abaseEqLength; i++) {
if (abaseEq[i] == '-') {
negindex = i;
negindexplus += (negindex + 1);
}
}
for (var x = 0; x < negindex; x++) {
lowestdamage = lowestdamage + abaseEq[x];
console.log("Lowest Damage: " + lowestdamage);
}
for (var y = negindexplus; y <= abaseEqLength; y++) {
maxdamage = maxdamage + abaseEq[y];
console.log("Max Damage: " + maxdamage);
}
if (updifference => 0 && updifference <= 10) {
updifference = plusdifference[updifference];
console.log("updifference: "+updifference);
result = "pos";
}
if (updifference < 0 && updifference >= -10) {
var negarray = negdifference * -1;
negdifference[updifference] = plusdifference[negarray];
}
var mindamage = parseInt(lowestdamage);
var maxidamage = parseInt(maxdamage);
if (result == "pos") {
aeqmin = mindamage * (1 + plusdifference[updifference]);
aeqmax = maxidamage * (1 + plusdifference[updifference]);
}
if (aeqmax > 0) {
$('#result').html = aeqmin + "~" + aeqmax;
}
}); // calculate on click function
}); // document ready
I am trying to develop a simple accounting calculator.
Maybe the word calculator would be more vast according to my project nature. In fact it is simple transaction calculation.
First fall it deals with
item rate
item qnt
total amnt of each item (rate*qnt)
I did it, now all row amnt should be sum and set result as Grand total with condition - the requirement. Indeed, I can't handle this condition.
condition can be
discount
tax
to the sum of total items user can apply discount(+), tax(%), loss(-) whatever he wish, I am able to get result of these conditions also, but while merging result or to get grand total, it becomes mess and output in grand total comes randomly.
For example, user bought
item qnt rate amnt
pen 1200 2 2400
copy 200 20 4000
Now
13% vat included + (//user can enter with % sigh, amount would be 492)
200 Discount got - 200
Grand total should be 6692
My result is 8172.16 almost double. I prefer pure JavaScript, if it is becomes more easier with Jquery is also good.
window.onload=function(){
itm_qnt_rte();
dsc_vat();
}
function itm_qnt_rte(){
var rte = document.querySelectorAll('.rte');
for(var i=0;i<rte.length;i++){
rte[i].onchange=function(){
var rate = parseInt(this.value);
var qnt = parseInt(this.closest('tr').querySelector('.qnt').value);
if(rate > 0 && qnt >0){
var amnt = rate*qnt;
this.closest('tr').querySelector('.amnt').value = amnt;
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
}
var qnt = document.querySelectorAll('.qnt');
for(var i=0;i<qnt.length;i++){
qnt[i].onchange=function(){
var qnt = parseInt(this.value);
var rte = parseInt(this.closest('tr').querySelector('.rte').value);
if(rte > 0 && qnt >0){
var amnt = rte*qnt;
this.closest('tr').querySelector('.amnt').value = amnt;
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
}
}
function dsc_vat(){
var dsc_vat = document.querySelectorAll('.dv');
for(var a=0;a<dsc_vat.length;a++){
dsc_vat[a].onchange = function(){
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
}
var selected = this.closest('table').querySelectorAll('.dv');
for(var b=0;b<selected.length;b++){
var value = this.value;
var gttl = 0;
if (value !== '') {
if (value[value.length - 1] === '%') {
gttl = ((sum * parseInt(value)) / 100);
}
if (value[value.length - 1] !== '%') {
gttl = parseInt(value);
}
var n = gttl * 1;
if (n >= 0) {
sum = sum + gttl
} else {
sum = sum - Math.abs(gttl);
}
}
if (value == '' || value === '0') {
this.value=0;
}
this.closest('tr').querySelector('.dv_amnt').value = gttl;
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
.txtcenter{
text-align:center
}
.txtright{
text-align:right
}
.g_ttl{
border:2px solid red;
}
table{
margin-bottom:50px;
}
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
</tr>
<tr>
<td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
</table>
Table 2
<table>
<tr>
<th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
</tr>
<tr>
<td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
</table>
</body>
</html>
Ok here goes my explanation.
There are a few logic flaws which we have to take care of first.
1) You are using the same function to calculate discount and tax. And discount needs to be subtracted from the sum not added. Hece, I multiplied the discount value by -1.
2) The reason you were getting the sum as almost double is because you used the class dv for both discount and tax due to which the length was calculated as 2 instead of 1.
3) I have added a routine to calculate the tax separately and used a class 'dv_tax' specifically for tax calculation
I have made an assumption that the tax calculation is done after the discount is applied.
Note: In case of your program, the user needs to input all values in sequential order to calculate the discount and tax correctly i.e after adding discount or tax, if the user decides to change the input rate or qty he has to delete the tax and discount rates and key it in again. You can use additional onChange functions to recalculate tax and discount when any of the value changes.
HTML
<html>
<head>
</head>
<body>
<table>
<tr>
<th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
</tr>
<tr>
<td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt total_discount' /></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv_tax' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
</table>
Table 2
<table>
<tr>
<th>Particulars</th><th>Qnt</th><th>Rate</th><th>amnt</th>
</tr>
<tr>
<td>Pen</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td>Pencil</td><td><input type='text' class='qnt'></td><td><input type='text' class='rte' /></td>
<td><input type='text' class='amnt'></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Discount</td><td><input type='text' class='dv' /></td><td><input type='text' class='dv_amnt total_discount' /></td>
</tr>
<tr>
<td colspan='2' class='txtcenter'>Tax</td><td><input type='text' class='dv_tax' /></td><td><input type='text' class='dv_amnt' /></td>
</tr>
<tr><td colspan='3'>Grand Total</td><td><input type='text' class='g_ttl' /></td></tr>
</table>
</body>
</html>
Javascript
window.onload=function(){
itm_qnt_rte();
dsc_vat();
tax_vat();
}
function itm_qnt_rte(){
var rte = document.querySelectorAll('.rte');
for(var i=0;i<rte.length;i++){
rte[i].onchange=function(){
var rate = parseInt(this.value);
var qnt = parseInt(this.closest('tr').querySelector('.qnt').value);
if(rate > 0 && qnt >0){
var amnt = rate*qnt;
this.closest('tr').querySelector('.amnt').value = amnt;
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
}
var qnt = document.querySelectorAll('.qnt');
for(var i=0;i<qnt.length;i++){
qnt[i].onchange=function(){
var qnt = parseInt(this.value);
var rte = parseInt(this.closest('tr').querySelector('.rte').value);
if(rte > 0 && qnt >0){
var amnt = rte*qnt;
this.closest('tr').querySelector('.amnt').value = amnt;
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
}
}
function dsc_vat(){
var dsc_vat = document.querySelectorAll('.dv');
for(var a=0;a<dsc_vat.length;a++){
dsc_vat[a].onchange = function(){
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
}
var selected = this.closest('table').querySelectorAll('.dv');
for(var b=0;b<selected.length;b++){
var value = this.value;
var gttl = 0;
if (value !== '') {
if (value[value.length - 1] === '%') {
gttl = ((sum * parseInt(value)) / 100);
gttl = gttl*-1;
}
if (value[value.length - 1] !== '%') {
gttl = parseInt(value);
gttl = gttl*-1;
}
var n = gttl * 1;
if (n >= 0) {
sum = sum + gttl
} else {
sum = sum - Math.abs(gttl);
}
}
if (value == '' || value === '0') {
this.value=0;
}
this.closest('tr').querySelector('.dv_amnt').value = Math.abs(gttl);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
function tax_vat(){
var tax_vat = document.querySelectorAll('.dv_tax');
for(var a=0;a<tax_vat.length;a++){
tax_vat[a].onchange = function(){
var sum = 0;
var g_ttl = this.closest('table').querySelectorAll('.amnt');
for(k=0;k<g_ttl.length;k++){
var value = parseInt(g_ttl[k].value);
if (!isNaN(value) && value.length != 0) {
sum += parseFloat(value);
}
}
var disc_select = this.closest('table').querySelectorAll('.total_discount');
sum = sum - disc_select[0].value;
var selected = this.closest('table').querySelectorAll('.dv_tax');
for(var b=0;b<selected.length;b++){
var value = this.value;
var gttl = 0;
if (value !== '') {
if (value[value.length - 1] === '%') {
gttl = ((sum * parseInt(value)) / 100);
}
if (value[value.length - 1] !== '%') {
gttl = parseInt(value);
}
var n = gttl * 1;
if (n >= 0) {
sum = sum + gttl
} else {
sum = sum - Math.abs(gttl);
}
}
if (value == '' || value === '0') {
this.value=0;
}
this.closest('tr').querySelector('.dv_amnt').value = Math.abs(gttl);
}
this.closest('table').querySelector('.g_ttl').value = sum;
}
}
}
I am trying to create a function that will colorize the contents of the table based on the values of the row.
I am able to get the data from each row into an array and save the low and high values to a variable. How can I add a class low or high to the low and high values in each row?
In each tr I only want to compare the 1st,2nd,and 3rd position as the zero position is the index.
function showRows(s) {
var t = s.options[s.selectedIndex].text;
var rows = document.getElementById('mytab').getElementsByTagName('tr'),
i = 0,
r, c;
while (r = rows[i++]) {
if (t == 'All') {
r.style.display = ''
} else {
c = r.getElementsByTagName('td')[0].firstChild.nodeValue;
sxval = r.getElementsByTagName('td')[1].firstChild.nodeValue;
fcval = r.getElementsByTagName('td')[2].firstChild.nodeValue;
sgval = r.getElementsByTagName('td')[3].firstChild.nodeValue;
unval = r.getElementsByTagName('td')[4].firstChild.nodeValue;
array = [sxval, fcval, sgval, unval]
var low = Math.min(...array)
var high = Math.max(...array)
console.log("lowest" + " " + low)
console.log("highest" + " " + high)
console.log(c)
console.log(t)
r.style.display = parseInt(c) == parseInt(t) ? '' : 'none';
}
}
}
<body>
<table align="center" border="1" width="50%" cellspacing="0" cellpadding="4">
<tr>
<th>
<select name="mylist" onchange="showRows(this)">
<option value="m1">All</option>
<option value="m2">4</option>
<option value="m3">4.5</option>
<option value="m4">5</option>
</select>
</th>
</tr>
<br>
<table id="mytab" align="center" border="1" width="50%" cellspacing="0" cellpadding="4">
<tr class="content">
<td class="cj-has-text-centered contentcheck">
4 </td>
<td class="cj-has-text-centered">
50 </td>
<td class="cj-has-text-centered">
100 </td>
<td class="cj-has-text-centered">
200 </td>
<td class="cj-has-text-centered">
300 </td>
</tr>
<tr class="content">
<td class="cj-has-text-centered contentcheck">
4.5 </td>
<td class="cj-has-text-centered">
50 </td>
<td class="cj-has-text-centered">
100 </td>
<td class="cj-has-text-centered">
200 </td>
<td class="cj-has-text-centered">
300 </td>
</tr>
<tr class="content">
<td class="cj-has-text-centered contentcheck">
5 </td>
<td class="cj-has-text-centered">
50 </td>
<td class="cj-has-text-centered">
100 </td>
<td class="cj-has-text-centered">
200 </td>
<td class="cj-has-text-centered">
300 </td>
</tr>
</table>
You can use Jquery to do this. Here is the sample. Hope to help, my friend :))
<style>
.highest{
background-color:blue;
}
.lowest{
background-color:red;
}
</style>
function showRows(s) {
var t = s.options[s.selectedIndex].text;
var rows = document.getElementById('mytab').getElementsByTagName('tr'),
i = 0,
r, c;
while (r = rows[i++]) {
if (t == 'All') {
r.style.display = ''
} else {
c = r.getElementsByTagName('td')[0].firstChild.nodeValue;
sxval = r.getElementsByTagName('td')[1].firstChild.nodeValue;
fcval = r.getElementsByTagName('td')[2].firstChild.nodeValue;
sgval = r.getElementsByTagName('td')[3].firstChild.nodeValue;
unval = r.getElementsByTagName('td')[4].firstChild.nodeValue;
array = [sxval, fcval, sgval, unval]
var low = Math.min(...array)
var high = Math.max(...array)
console.log("lowest" + " " + low)
console.log("highest" + " " + high)
console.log(c)
console.log(t)
r.style.display = parseInt(c) == parseInt(t) ? '' : 'none';
//Skip the first column, use :not(:first-child)
$('tr').each(function(){
var vals = $('td:not(:first-child)',this).map(function () {
return parseInt($(this).text(), 10) ? parseInt($(this).text(), 10) : null;
}).get();
// then find their minimum
var min = Math.min.apply(Math, vals);
var max = Math.max.apply(Math, vals);
// tag any cell matching the min and max value
$('td', this).filter(function () {
return parseInt($(this).text(), 10) === min;
}).addClass('highest');
$('td', this).filter(function () {
return parseInt($(this).text(), 10) === max;
}).addClass('lowest');
});
}
}
};
how can I add the inputted data under 'unit cost', 'finance %' and 'freight cost/unit' and output that in 'unit landed cost price'? Here's a screenshot to illustrate http://s18.postimg.org/b1avx0omx/retail_calc.png
Here's the current script supplied.
<script>
var gstPercent = 10.0;
function retailToolkit_UpdateRetailCalculator()
{
var sellPrice = retailToolkit_ValidateFloatInput('txtRetailCalculatorSellPrice');
var costPrice = retailToolkit_ValidateFloatInput('txtRetailCalculatorCostPrice');
var margin = retailToolkit_ValidateFloatInput('txtRetailCalculatorMargin');
var grossMargin = retailToolkit_ValidateFloatInput('txtRetailCalculatorGrossMargin');
var inputCount = 0;
if (!isNaN(sellPrice))
inputCount++;
if (!isNaN(costPrice))
inputCount++;
if (!isNaN(margin))
inputCount++;
if (!isNaN(grossMargin))
inputCount++;
if (inputCount == 2)
{
var sellPriceExGST;
if (isNaN(sellPrice))
{
if (isNaN(costPrice))
{
//we have margin & grossMargin
sellPriceExGST = grossMargin / (margin / 100.0);
costPrice = sellPriceExGST - grossMargin;
sellPrice = sellPriceExGST + (sellPriceExGST * (gstPercent / 100));
}
else if (isNaN(margin))
{
//we have costPrice & grossMargin
sellPriceExGST = costPrice + grossMargin
sellPrice = sellPriceExGST + (sellPriceExGST * (gstPercent / 100));
}
else
{
//we have costPrice & margin
sellPriceExGST = (costPrice / (100 - margin)) * 100;
sellPrice = sellPriceExGST + (sellPriceExGST * (gstPercent / 100));
}
}
else
sellPriceExGST = (sellPrice / (100 + gstPercent)) * 100;
//once we reach here we now definitely have sellPriceExGST & sellPrice
if (isNaN(costPrice))
{
if (!isNaN(grossMargin)) //we have sellPriceExGST & grossMargin
costPrice = sellPriceExGST - grossMargin;
else
{
//we have sellPriceExGST & margin
grossMargin = sellPriceExGST * margin / 100;
costPrice = sellPriceExGST - grossMargin;
}
}
if (isNaN(grossMargin))
grossMargin = sellPriceExGST - costPrice;
if (isNaN(margin))
margin = (grossMargin / sellPriceExGST) * 100;
document.getElementById("spanRetailCalculatorSellPrice").innerHTML = FormatCost(sellPrice, "$", 2);
document.getElementById("spanRetailCalculatorCostPrice").innerHTML = FormatCost(costPrice, "$", 2);
document.getElementById("spanRetailCalculatorMargin").innerHTML = FormatCost(margin, "", 1) + "%";
document.getElementById("spanRetailCalculatorGrossMargin").innerHTML = FormatCost(grossMargin, "$", 2);
}
else
{
document.getElementById("spanRetailCalculatorSellPrice").innerHTML = "";
document.getElementById("spanRetailCalculatorCostPrice").innerHTML = "";
document.getElementById("spanRetailCalculatorMargin").innerHTML = "";
document.getElementById("spanRetailCalculatorGrossMargin").innerHTML = "";
}
}
function retailToolkit_ValidateFloatInput(inputCtrlId)
{
var ctrl = document.getElementById(inputCtrlId);
var flt = parseFloat(ctrl.value);
if (isNaN(flt))
ctrl.value = '';
else
{
var corrected = "";
for (var i = 0; i < ctrl.value.length; i++)
{
if ((ctrl.value[i] >= '0' && ctrl.value[i] <= '9') || ctrl.value[i] == '.')
corrected += ctrl.value[i];
}
ctrl.value = corrected;
}
return flt;
}
</script>`
and the HTML is below.
<tr>
<td>Unit Landed Cost Price (excluding GST), including finance and freight charges</td>
<td>$</td>
<td><span id="spanRetailCalculatorCostPrice"></span><br />
</td>
<td></td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Unit Cost</td>
<td>Finance %</td>
<td>Freight Cost/Unit</td>
</tr>
<tr>
<td><input type="text" onkeyup="return retailToolkit_UpdateRetailCalculator()" id="txtRetailCalculatorCostPrice" /></td>
<td><input type="text" onkeyup="return retailToolkit_UpdateRetailCalculator()" id="txtRetailCalculatorFinancePercentage" /></td>
<td><input type="text" onkeyup="return retailToolkit_UpdateRetailCalculator()" id="txtRetailCalculatorFreightCost" /></td>
</tr>
</table>
</td>
</tr>
<tr>
i have a little issue. That's my code and i don't know what i have made wrong. I try to complete a simple HTML form to calculate a given number in a text input html element.
function rebate(){
var rebate_a,rebate_b,total,final;
var a = document.myform.rebatenum.value;
if( a <= 3000 )
{
final = a;
}
else if ( (a > 3000) && (a <= 10000 ) )
{
rebate_a = (a-3000) * 0.02;
total = rebate_a;
final = a - rebate_a;
}
else if ( (a > 10000) && (a <= 30000 ) )
{
rebate_a = (7000 * 0.02) + (a-10000) * 0.03;
total = rebate_a;
final = a - rebate_a;
}
else if ( (a > 30000) && (a <= 40000 ) )
{
rebate_a = (7000 * 0.02) + (20000 * 0.03) + (a-30000) * 0.05;
total = rebate_a;
final = a - rebate_a;
}
else if( (a >= 40000) && (a < 50000 ))
{
rebate_a = (7000 * 0.02) + (20000 * 0.03) + (10000 * 0.05) + (a-40000) * 0.06;
rebate_b = 25;
total = rebate_a + rebate_b;
final = a - total;
}
else
{
document.myform.final.value = "20";
}
document.getElementById("demo").innerHTML = a;
document.myform.final.value = final;
}
<form name="myform">
<table border="0">
<tr>
<td>Initial Price</td>
<td><input name="rebatenum" type="text" size="12" onchange="rebate();"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="Υπολογισμός" onclick="rebate();"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>Final Price after rebate:</td>
<td><input type="text" name="final" size="12"></td>
</tr>
</table>
</form>
<p id="demo"></p>
You can find it also here!!!
http://jsfiddle.net/pf7Lysqt/3/