Since the color-space conversion confused me ago, I have created this tool to easy conversion between different versions of BT.601,BT.709 and RGB.
But I still not sure if I should use floor or round to calculate the conversion result. please help comment then I will improve this tool.
A601v1 = [[0.257, 0.504, 0.098],
[-0.148, -0.291, 0.439],
[0.439, -0.368, -0.071]];
O601v1 = [[16, 128, 128]];
A601v2 = [[0.299, 0.587, 0.114],
[-0.173, -0.339, 0.511],
[0.511, -0.428, -0.083]];
O601v2 = [[16, 128, 128]];
A601v3 = [[0.299, 0.587, 0.114],
[-0.169, -0.331, 0.500],
[0.500, -0.419, -0.081]];
O601v3 = [[0, 128, 128]];
A709v1 = [[0.1826, 0.6142, 0.0620],
[-0.1006, -0.3386, 0.4392],
[0.4392, -0.3989, -0.0403]];
O709v1 = [[16, 128, 128]];
A709v2 = [[0.2126, 0.7152, 0.0722],
[-0.1146, -0.3854, 0.5000],
[0.5000, -0.4542, -0.0468]];
O709v2 = [[0, 128, 128]];
A = A601v1;
O = O601v1;
function combo(thelist) {
var idx = thelist.selectedIndex;
var colspace = thelist.options[idx].value;
if (colspace === "BT.601v1") {
A = A601v1;
O = O601v1;
}else if (colspace === "BT.601v2") {
A = A601v2;
O = O601v2;
}else if (colspace === "BT.601v3") {
A = A601v3;
O = O601v3;
}else if (colspace === "BT.709v1") {
A = A709v1;
O = O709v1;
}else if (colspace === "BT.709v2") {
A = A709v2;
O = O709v2;
}
}
function yuv2rgb(f) {
var y, u, v,r,g,b, yuv,rgb,offset;
y = parseInt(f.y.value);
u = parseInt(f.u.value);
v = parseInt(f.v.value);
yuv = [[y,u,v]];
Ainv = math.inv(A);
yuv = math.subtract(yuv,O);
rgb = math.multiply(yuv,math.transpose(Ainv))
rgb = math.round(rgb);
rgb = clip(rgb,0,255);
r = rgb[0][0];
g = rgb[0][1];
b = rgb[0][2];
f.red.value = r;
f.green.value = g;
f.blue.value = b;
var yuvElem = document.getElementById('yuv');
yuvElem.src = getDataUrl(r,g,b);
}
function rgb2hex(r,g,b) {
var v;
if (g !== undefined) {
v = Number(0x1000000 + r*0x10000 + g*0x100 + b).toString(16).substring(1);
}else {
v = Number(0x1000000 + r[0][0]*0x10000 + r[0][1]*0x100 + r[0][2]).toString(16).substring(1);
}
return "#" + v;
}
function clip(m1,low,high) {
var result = [];
for (var i = 0; i < m1.length; i++) {
result[i] = [];
for (var j = 0; j < m1[0].length; j++) {
if (m1[i][j] < low) {
result[i][j] = low;
}else if (m1[i][j] > high) {
result[i][j] = high;
}else{
result[i][j] = m1[i][j];
}
}
}
return result;
}
function rgb2yuv(f) {
var y, u, v, r, g, b,yuv,rgb,offset;
r = parseInt(f.red.value);
g = parseInt(f.green.value);
b = parseInt(f.blue.value);
rgb = [[r,g,b]];
yuv = math.multiply(rgb,math.transpose(A));
yuv = math.add(yuv,O);
yuv = math.round(yuv);
yuv = clip(yuv,0,255);
f.y.value = yuv[0][0];
f.u.value = yuv[0][1];
f.v.value = yuv[0][2];
var yuvElem = document.getElementById('yuv');
yuvElem.src = getDataUrl(r,g,b);
}
function getDataUrl(r,g,b) {
var canvas = document.createElement('canvas');
var height=100;
var width=100;
canvas.height=height;
canvas.width=width;
var context = canvas.getContext("2d");
var imageData=context.createImageData(width, height);
var data = imageData.data;
for (var i=0; i<height*width; i++) {
data[i*4+0] = r | 0;
data[i*4+1] = g | 0;
data[i*4+2] = b | 0;
data[i*4+3] = 255;
}
context.putImageData(imageData, 0, 0);
var url = canvas.toDataURL("image/png");
return url;
}
<!DOCTYPE html>
<html>
<head>
<title>yuv rgb converter</title>
</head>
<body>
<form name="yuv2rgb_form">
<label for="colspace">Color space:</label>
<select name="colspace" onChange="combo(this)">
<option>BT.601v1</option>
<option>BT.601v2</option>
<option>BT.601v3</option>
<option>BT.709v1</option>
<option>BT.709v2</option>
</select>
<table border="1">
<tr>
<td>
<table border="0">
<tr>
<td>Red</td>
<td><input type="text" name="red" value="0" size=5></td>
</tr>
<tr>
<td>Green</td>
<td><input type="text" name="green" value="0" size=5></td>
</tr>
<tr>
<td>Blue</td>
<td><input type="text" name="blue" value="0" size=5></td>
</tr>
<tr>
<td><input type="button" value="rgb2yuv" onclick="rgb2yuv(this.form);"></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Y</td>
<td><input type="text" name="y" value="0" size=5></td>
</tr>
<tr>
<td>U</td>
<td><input type="text" name="u" value="0" size=5></td>
</tr>
<tr>
<td>V</td>
<td><input type="text" name="v" value="0" size=5></td>
</tr>
<tr>
<td><input type="button" value="yuv2rgb" onclick="yuv2rgb(this.form);"></td>
</tr>
</table>
</td>
<td><Image id="yuv" style="width:100px; height:100px;"></div></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.2.1/math.js"></script>
</html>
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 working on a Script for sorting boxes.
Here my problem.
In the code:
Size_XS = document.getElementById('Size_XS'+i).value*1;
seems to work without any problem.
While this one:
document.getElementById('Size_XS'+i).value = Size_XS;
will give me the error message: document.getElementById(...) is null or not an object.
if I change to:
document.getElementById('Size_XS1').value = Size_XS;
It all works, but then I cannot loop the file later and why does it work with i above?
My script below:
function calcbox(){
var count = document.getElementById('count').value*1;
count = count+1;
var box_num = 0;
var header = "<table style='border:#000 1px solid; background-color:#fff;'><tr><td width='25'><b>Box</b></td><td width='200'><b>Item name</b></td><td width='100'><b>Sizes</b></td><td width='250'><b>Pcs</b></td></tr>";
var output = header+document.getElementById('output').innerHTML;
var total_qty;
var box_qty;
var item_name;
var Size_XS=0;
var Size_S=0;
var Size_M=0;
var Size_L=0;
/*for(var i=1;i<count;i++){*/
var i=1;
total_qty = document.getElementById('total_qty'+i).value*1;
box_qty = document.getElementById('box_qty'+i).value*1;
item_name = document.getElementById('item_name'+i).value;
Size_XS = document.getElementById('Size_XS'+i).value*1;
Size_S = document.getElementById('Size_S'+i).value*1;
Size_M = document.getElementById('Size_M'+i).value*1;
Size_L = document.getElementById('Size_L'+i).value*1;
//Packing whole boxes
if(Size_XS>=box_qty){
var Box_count = parseInt(Size_XS/box_qty);
for(var i=1;i<=Box_count;i++){
box_num = box_num+1;
output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>S</td><td>"+box_qty+"</td></tr>";
}
Size_XS = Size_XS-(box_qty*Box_count);
alert(Size_XS);
document.getElementById('Size_XS'+i).value = Size_XS;
}
if(Size_S>=box_qty){
var Box_count = parseInt(Size_S/box_qty);
for(var i=1;i<=Box_count;i++){
box_num = box_num+1;
output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>S</td><td>"+box_qty+"</td></tr>";
}
Size_S = Size_S-(box_qty*Box_count);
document.getElementById('Size_S'+i).value = Size_S;
}
if(Size_M>=box_qty){
var Box_count = parseInt(Size_M/box_qty);
for(var i=1;i<=Box_count;i++){
box_num = box_num+1;
output = output+"<tr><td>"+box_num+"</td><td>"+item_name+"</td><td>M</td><td>"+box_qty+"</td></tr>";
}
Size_M = Size_M-(box_qty*Box_count);
document.getElementById('Size_M'+i).value = Size_M;
}
if(Size_L>=box_qty){
var Box_count = parseInt(Size_L/box_qty);
for(var i=1;i<=Box_count;i++){
box_num = box_num+1;
output = output+"<tr><td>"+box_num+"</td><td>"+item_name+" </td><td>L</td><td>"+box_qty+"</td></tr>";
}
Size_L = Size_L-(box_qty*Box_count);
document.getElementById('Size_L'+i).value = Size_L;
}
document.getElementById("output").innerHTML = output+"</table>";
document.getElementById("qty_boxes").value = box_num;
show('Volume_weight');
}
I'm getting my values from here in the HTML code:
<table>
<tr>
<td width="10">1</td>
<td width="120"><input id="item_name1" type="text" style="width:100px;" /></td>
<td width="80"><input id="box_qty1" type="text" style="width:30px;" /></td>
<td width="40"><input id="Size_XS1" type="text" style="width:30px;" onchange="totcalc(1);" /></td>
<td width="40"><input id="Size_S1" type="text" style="width:30px;" onchange="totcalc(1);" /></td>
<td width="40"><input id="Size_M1" type="text" style="width:30px;" onchange="totcalc(1);" /></td>
<td width="40"><input id="Size_L1" type="text" style="width:30px;" onchange="totcalc(1);" /></td>
<td width="60"><input id="total_qty1" type="text" style="width:50px;" /></td>
</tr>
</table>
You have used i for two different things in the code. Firstly as a suffix to input element id values, and secondly as a loop counter for boxes. After i is no longer equal to 1 after various loops complete, the HTML element lookup by suffixed id fails:
document.getElementById('Size_XS'+i).value = Size_XS;
occurs after
for(var i=1;i<=Box_count;i++){ // ...
Feel free to delete the question if this is the problem :D
Hey guys looking for some assistance with changing the color of text based on value. If the value is zero or negative I want it to be red, and if the value is + I want it to be green. Below is just a little bit of code from the full html but I think these are the key parts. Here is a JSFiddle As you can see the table is dynamic. As you input data into the starting amount it will automatically calculate it for the ending amount. The starting amount adds to the bill amount which produces the total amount number. I am also not sure if the event "onchange" is correct. Thank you for your input and advise in advanced.
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt" onchange="colorChange(this)">0</span></b></p>
<script type="text/Javascript">
var myElement = document.getElementById('totalAmt');
function colorChange() {
if('myElement' > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt') ;
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
}
</script>
You can reach the desired result using just one function. Instead of checking the DOM element's innerHTML or textContext to get the amount, just refer to the variables holding it.
var myElement = document.getElementById('totalAmt');
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
myElement.style.color = money + billTotal <= 0 ? 'red' : 'green';
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>
use myElement.innerHTML instead of myElement in the if condition and invoke the changeColor function at last of calc
var myElement = document.getElementById('totalAmt');
function colorChange() {
if (myElement.innerHTML <= 0) {
totalAmt.style.color = 'red';
} else {
totalAmt.style.color = 'green';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange();
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"></td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>
A couple issues with your original code:
1 - you were checking if the string myElement was greater than zero, instead of the innerHTML of the element you selected.
2 - using innerHTML() to change the contents of an element doesn't fire an onchange event. In my code, I call your colorChange function at the end of the calc function, so if you decide to add another field to it (tax or something), it will be called after the total is calculated.
function colorChange() {
var myElement = document.getElementById('totalAmt');
if (myElement.innerHTML > 0) {
totalAmt.style.color = 'green';
} else {
totalAmt.style.color = 'red';
}
}
function calc() {
var money = parseInt(document.querySelector('#money').value) || 0;
var bills = document.querySelectorAll('table tr input.billAmt');
var billTotal = 0;
for (i = 0; i < bills.length; i++) {
billTotal += parseInt(bills[i].value) || 0;
}
totalAmt.innerHTML = money + billTotal;
colorChange()
}
<p><b>Starting Amount: $ <input id="money" type="number" onkeyup="calc()"></b></p>
<table>
<tr>
<th>Bill Ammount</th>
</tr>
<tr>
<td><input type="number" class="billAmt" id="billAmt" onkeyup="calc()"> </td>
</tr>
</table>
<input type="hidden" id="total" name="total" value="0">
<p><b>Ending Amount: $ <span id="totalAmt">0</span></b></p>