We Keep Coding

Changing value of input range not updating content on mobile

I have an HTML input range that uses JS to change the text content of a table below it based on the value of the input range. It is working on Desktop but on Mobile the content will be stuck at the specified content for value = 1 and won't change to 2, 3, and 4. Any ideas? Thank you!
<div class="range-wrap">
<input type="range" class="range" id="slide" value="1" min="1" max="4" />
<output class="bubble"></output>
</div>
<h3 class="you-will">Every week you will save...</h3>
<table class="save">
<tr>
<td><img class="eco-icon" src="https://www.happynest.com/hubfs/14500231/eco-icons-01.png" alt="time" / ></td>
<td class="eco-text"><strong><span id="time"></span></strong> <span>Spend time outdoors!</span></td>
</tr>
<tr>
<td><img class="eco-icon" src="https://www.happynest.com/hubfs/14500231/eco-icons-02.png" alt="water" / ></td>
<td class="eco-text"><strong><span id="water"></span></strong> <span>Save the environment.</span></td>
</tr>
<tr>
<td><img class="eco-icon" src="https://www.happynest.com/hubfs/14500231/eco-icons-03.png" alt="electricity" / ></td>
<td class="eco-text"><strong><span id="electric"></span></strong> <span>Save some money.</span></td>
</tr>
</table>
JS
function updateSlider() {
var value = $("#slide").val();
if (value == 1) {
$("#time").text("4 hours of time.");
$("#water").text("60 gallons of water.");
$("#electric").text("$5 in electric bills.");
} else if (value == 2) {
$("#time").text("8 hours of time.");
$("#water").text("120 gallons of water.");
$("#electric").text("$10 in electric bills.");
} else if (value == 3) {
$("#time").text("12 hours of time.");
$("#water").text("180 gallons of water.");
$("#electric").text("$15 in electric bills.");
} else if (value == 4) {
$("#time").text("16 hours of time.");
$("#water").text("240 gallons of water.");
$("#electric").text("$20 in electric bills.");
}
}
updateSlider();
$('#slide').mousemove(updateSlider);
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = val;
// Sorta magic numbers based on size of the native UI thumb
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 1.5}px))`;
}
The input range is changing the table's content on Desktop but not mobile

javascript calculation grand total result become double

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;
}
}
}

Create a loop to calculate average scores

I would like to calculate the class average and wanted to store the inputs in different variables. However, the scores are calculating together at once and I have trouble fixing it. Do I use a for loop to repeat the equation? Please help me ! Thanks
Here is my codepen to the code:
https://codepen.io/ivy-chung/pen/GBzmwb?editors=1010
$(document).ready(function() {
//iterate through each textboxes
$('.txtMarks').each(function() {
// call 'calcSumAndAverage' method on keyup handler.
$(this).keyup(function() {
// check value is within range and is a number
if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {
calcGradeScore();
} else {
alert("Wrong number, number must be 0-30");
}
});
});
});
function calcGradeScore() {
var total = 0;
var average = 0;
var avgGrade;
var img = document.createElement("img");
//iterate through each textboxes with class name '.txtMarks'and add the values.
$('.txtMarks').each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});
//Calculate the Average
if (!isNaN(total) && total != 0) {
//Get count of textboxes with class '.txtMarks'
var txtboxes = $('.txtMarks').length;
average = parseFloat(total) / (txtboxes * 0.3);
}
if (average >= 80 && average < 100) {
avgGrade = 'HD-High Distiction';
img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
} else if (average >= 70 && average < 79) {
avgGrade = 'D-Distiction';
img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
} else if (average >= 60 && average < 69) {
avgGrade = 'C-Credit';
img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
} else if (average >= 50 && average < 59) {
avgGrade = 'P-Pass';
img.src = "http://images.memes.com/meme/535301";
} else if (average >= 0 && average < 49) {
avgGrade = 'F-Failed';
img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
}
//Show Total Marks.
$('#totalMarks').html(total);
// Show Average upto 2 decimal places using .toFixed() method.
$('#average').html(average.toFixed(1) + "%");
// S
$('#grade').html(avgGrade);
//
$('#image').html(img);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Grade Calculator</h1>
<table class="grade-table">
<tr class="label">
<td colspan="2">Please enter student's classwork score out of 30:</td>
</tr>
<tr>
<td>Subject 1:</td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr>
<td>Subject 2: </td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr>
<td>Subject 3:</td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr class="label">
<td class="right">Total Marks :</td>
<td class="center"><span id="totalMarks">0</span></td>
</tr>
<tr class="label">
<td class="right">Average Percentage :</td>
<td class="center"><span id="average">0</span></td>
</tr>
<tr class="label">
<td class="right">Grade:</td>
<td class="center"><span id="grade">0</span></td>
</tr>
<tr class="label">
<td class="right"></td>
<td class="center"><span id="image"></span></td>
</tr>
</table>
<table class="grade-table">
<tr class="label">
<td colspan="2">Please enter student's classwork score out of 30:</td>
</tr>
<tr>
<td>Subject 1:</td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr>
<td>Subject 2: </td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr>
<td>Subject 3:</td>
<td>
<input type="text" class="txtMarks" name="txtMarks" maxlength="4" /></td>
</tr>
<tr class="label">
<td class="right">Total Marks :</td>
<td class="center"><span id="totalMarks">0</span></td>
</tr>
<tr class="label">
<td class="right">Average Percentage :</td>
<td class="center"><span id="average">0</span></td>
</tr>
<tr class="label">
<td class="right">Grade:</td>
<td class="center"><span id="grade">0</span></td>
</tr>
<tr class="label">
<td class="right"></td>
<td class="center"><span id="image"></span></td>
</tr>
</table>

As your are using duplicate id for Total Marks, Average Percentage, Grade and image, so instead of using duplicate id use class name and access by
$(this).closest('table').find('.classname')
So will provide you current table element and calculation will be reflect for that particular table.
Working codepen
CODE SNIPPET
$(document).ready(function() {
//iterate through each textboxes
$('.txtMarks').each(function() {
// call 'calcSumAndAverage' method on keyup handler.
$(this).keyup(function() {
// check value is within range and is a number
if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value <= 30) {
calcGradeScore($(this).closest('table'));
} else {
alert("Wrong number, number must be 0-30");
}
});
});
});
function calcGradeScore(el) {
var total = 0,
average = 0,
avgGrade,
img = document.createElement("img"),
txtMarks = el.find('.txtMarks');
//iterate through each textboxes with class name '.txtMarks'and add the values.
txtMarks.each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});
//Calculate the Average
if (!isNaN(total) && total != 0) {
//Get count of textboxes with class '.txtMarks'
var txtboxes = txtMarks.length;
average = parseFloat(total) / (txtboxes * 0.3);
}
if (average >= 80 && average < 100) {
avgGrade = 'HD-High Distiction';
img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
} else if (average >= 70 && average < 79) {
avgGrade = 'D-Distiction';
img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
} else if (average >= 60 && average < 69) {
avgGrade = 'C-Credit';
img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
} else if (average >= 50 && average < 59) {
avgGrade = 'P-Pass';
img.src = "http://images.memes.com/meme/535301";
} else if (average >= 0 && average < 49) {
avgGrade = 'F-Failed';
img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
}
//Show Total Marks.
el.find('.totalMarks').html(total);
// Show Average upto 2 decimal places using .toFixed() method.
el.find('.average').html(average.toFixed(1) + "%");
// S
el.find('.grade').html(avgGrade);
//
el.find('.image').html(img);
}

you can add the parent selector to calculate the average for each table
<table class="grade-table" id="table1">....</div>
<table class="grade-table" id="table2">....</div>
$(document).ready(function () {
//iterate through each textboxes
$('.txtMarks').each(function(){
// call 'calcSumAndAverage' method on keyup handler.
$(this).keyup(function () {
// check value is within range and is a number
if (!isNaN(this.value) && this.value.length != 0 && this.value >= 0 && this.value<=30) {
calcGradeScore('#'+this.parentElement.parentElement.parentElement.parentElement.id); // td > tr > tbody > table
}else{
alert("Wrong number, number must be 0-30");
}
});
});
});
function calcGradeScore($parentSelector) {
var total = 0;
var average = 0;
var avgGrade;
var img = document.createElement("img");
//iterate through each textboxes with class name '.txtMarks'and add the values.
$($parentSelector +' .txtMarks').each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0 ) {
total += parseFloat(this.value);
}
console.log(total);
});
//Calculate the Average
if (!isNaN(total) && total != 0) {
//Get count of textboxes with class '.txtMarks'
var txtboxes = $($parentSelector +' .txtMarks').length;
average = parseFloat(total) / (txtboxes*0.3);
}
if(average >= 80 && average < 100){
avgGrade = 'HD-High Distiction';
img.src = "https://memegenerator.net/img/instances/19226146/first-assestment-of-the-year-gets-high-distinction.jpg";
}
else if(average >= 70 && average < 79){
avgGrade = 'D-Distiction';
img.src = "https://memegenerator.net/img/instances/53639165/distinction-why-not-high-distinction.jpg";
}
else if(average >= 60 && average < 69){
avgGrade = 'C-Credit';
img.src = "https://pics.me.me/the-face-you-make-cjthecreditfixer-when-you-check-your-credit-27495760.png";
}
else if(average >= 50 && average < 59){
avgGrade = 'P-Pass';
img.src = "http://images.memes.com/meme/535301";
}
else if(average>= 0 && average < 49){
avgGrade = 'F-Failed';
img.src = "https://www.36ng.ng/wp-content/uploads/2015/09/Exam-fail-3.jpg";
}
//Show Total Marks.
$($parentSelector +' #totalMarks').html(total);
// Show Average upto 2 decimal places using .toFixed() method.
$($parentSelector +' #average').html(average.toFixed(1) + "%");
// S
$($parentSelector +' #grade').html(avgGrade);
//
$($parentSelector +' #image').html(img);
}

Trouble Using an If Statement

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>

Output a total that will be used for further computation - JavaScript

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>