We Keep Coding

How can i use default value in javascript

<td><input size="12" type="text" name="invoice[promcode][]" /></td>
<td><input size="12" onchange='bitExtention(0)' id="itemname0" type="text" name="invoice[itemname][]"/></td>
<td><input type="number" name="invoice[basecode][]"/></td>
<td><input size="12" type="text" name="invoice[mm][]"/></td>
<td><input onchange='bitExtention(0)' type="number" id="posotita0" name="invoice[quantity][]"/></td>
<td><input onchange='bitExtention(0)' type="number" id="timi0" name="invoice[price][]" step="0.01"/></td>
<td><input onchange='bitExtention(0)' type="number" id="discount0" name="invoice[discount][]" step="0.01"/></td>
<td><input onchange='bitExtention(0)' type="number" id="sum0" name="invoice[sum][]" step="0.01"/></td>
<td><input onchange='bitExtention(0)' type="number" id="foros0" name="invoice[tax][]" step="0.01"/></td>
i want to put a default value for each var like
var timi = document.getElementById("timi"+x.toString()).defaultValue = 50;
this seams to work but when i run the program i change the value to 100 but var timi dont get updated and stuck to 50
function bitExtention(x)
{
var itemname = document.getElementById("itemname"+x.toString()).value;
var test = JSON.parse('<%= raw Item.select('itemName','promCode','baseCode','monadaMe','price','fpa').collect { |p| [p.itemName, p.promCode, p.baseCode, p.monadaMe, p.price, p.fpa] }.join("\n").gsub("\n", " ").split(" ")%>');
var dokimi = test.indexOf(itemname);
var maura = test[dokimi+4];
var posotita = document.getElementById("posotita"+x.toString()).value;
var timi = document.getElementById("timi"+x.toString()).defaultValue = 50;
var sum= document.getElementById("sum"+x.toString()).value;
var fpa= document.getElementById("foros"+x.toString()).value;
var discount= document.getElementById("discount"+x.toString()).value /100;
var total = timi - (timi * discount);
var total_foros = timi*fpa/100;
sum = total * posotita + total_foros
document.getElementById("sum"+x.toString()).value = sum;
}
i just notices tha the 0 || 50 works but it's no visibale at html table
fixed while puting this at the bottom of the code document.getElementById("timi"+x.toString()).value = timi; looks wrong but works for now

You can do
let myVar = document.getElementById(...).value || "default value";

Javascript default parameter
Mozila mdn firefox for default parameter

Markup error: document.getElementById(...) is null or not an object

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

Adding up inputs doesn't change javascript

I am trying to add up 3 input elements of type number. This doesn't work for some reason. When I take out the if statements, it works, but only after I change the first one (score1). When I change the others, nothing happens. Thanks.
function getTotal() {
var score1 = document.getElementById("score1");
var score2 = document.getElementById("score2");
var score3 = document.getElementById("score3");
var sc1 = parseInt(score1.value);
var sc2 = parseInt(score2.value);
var sc3 = parseInt(score3.value);
if (isNan(sc1)) {
sc1 = 0;
}
if (isNan(sc2)) {
sc2 = 0;
}
if (isNan(sc3)) {
sc3 = 0;
}
var total = sc1 + sc2 + sc3;
document.getElementById("totalScore").innerHTML = total;
}
function assign() {
var score1 = document.getElementbyId("score1");
var score2 = document.getElementbyId("score2");
var score3 = document.getElementbyId("score3");
score1.onchange = getTotal;
score2.onchange = getTotal;
score3.onchange = getTotal;
}
<!DOCTYPE html>
<html>
<head>
<script src="getTotal.js" type="text/javascript"></script>
</head>
<body>
<header>
<tbody>
<tr>
<td>
Total:
<output id="total" class="totalScore"></output>
</td>
</tr>
</tbody>
</header>
<table>
<tbody>
<td>Score 1</td>
<td><input type="number" id="score1"/></td>
<td>Score 2</td>
<td><input type="number" id="score2" /></td>
<td>Score 3</td>
<td><input type="number" id="score3" /></td>
</tbody>
</table>
<script type="text/javascript">assign();</script>
</body>
</html>

Spelling mistake.
var score1 = document.getElementbyId("score1");
var score2 = document.getElementbyId("score2");
var score3 = document.getElementbyId("score3");
If you check your console you will see the error Uncaught TypeError: undefined is not a function on the line where you are calling score1. The selector is document.getElement*By*Id, you were writing by lowercase..

Your <output> has an id attribute with the value is "total" whereas your class attribute' value is "totalscore". Consider changing the id value to "totalscore" or change getElementById's value to"score"

How to count value in rows cell table

If I have more than 1 rows where each rows have 3 column with the inputbox , maybe look like this:
<table id="mytable">
<tr>
<td><input value = "1" /></td>
<td><input value = "2" onBlur="goCount(this)" /></td>
<td><input value = "2+1" /></td>
</tr>
<tr>
<td><input value = "3" /></td>
<td><input value = "4" onBlur="goCount(this)" /></td>
<td><input value = "3+4" /></td>
</tr>
counting must be between cell 1 + cell 2 and the result will show in third cell, maybe the function must be like this :
function goCount(btn) {
var x = btn.value;
var y = ??? ;
var z = x + y;
}
but I do not know how to do that, First get the cell 1 as value and put the result on cell 3 but still in each same rows
is there someone who would help me to resolve this, thanks ^^

Here is your solution
Demo
Your code should be like this
<table id="mytable">
<tr>
<td><input value = "1" onBlur="goCount(this)"/></td>
<td><input value = "2" onBlur="goCount(this)" /></td>
<td><input value = "" id="result"/></td>
</tr>
<tr>
<td><input value = "3" /></td>
<td><input value = "4" onBlur="goCount(this)" /></td>
<td><input value = "" /></td>
</tr>
<script type="text/javascript">
function goCount(btn) {
var x = btn.value;
//var y = ??? ;
var res= document.getElementById("result") ;
//alert( res.value);
if(res.value == "") {
res.value = 0 ;
}
res.value = parseInt(res.value) + parseInt(x) ;
}
</script>
Note: Here is one thing you should note, I have used particular ID to return value in that, if you are using this for many rows you should use jQuery to navigate to that element in respective row and print result in it.

Get Sum from each row form-field

I trying to calculate some rows (input fields) but it seams to hard for me :(.
The html code i have looks like this:
<table>
<tr>
<td>
<input name="Field_Price_1" id="Field_Price_1" value="20.55" type="text">
<input name="Field_Amount_1" id="Field_Amount_1" type="text">
<input name="Field_SubTotal_1" id="Field_SubTotal_1" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_2" id="Field_Price_2" value="17.55" type="text">
<input name="Field_Amount_2" id="Field_Amount_2" type="text">
<input name="Field_SubTotal_2" id="Field_SubTotal_2" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_3" id="Field_Price_3" value="94.20" type="text">
<input name="Field_Amount_3" id="Field_Amount_3" type="text">
<input name="Field_SubTotal_3" id="Field_SubTotal_3" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_4" id="Field_Price_4" value="12.10" type="text">
<input name="Field_Amount_4" id="Field_Amount_4" type="text">
<input name="Field_SubTotal_4" id="Field_SubTotal_4" type="text">
</td>
</tr>
<tr>
<td>
<input name="Field_Price_5" id="Field_Price_5" value="7.45" type="text">
<input name="Field_Amount_5" id="Field_Amount_5" type="text">
<input name="Field_SubTotal_5" id="Field_SubTotal_5" type="text">
</td>
</tr>
So i would put the sum from all input fields "Field_Price_" in the following span by triggering "keyup" from each Field_Amount_".
<table>
<tr>
<td><span id="PrintSum">0.00</span></td>
</tr>
The following i tried:
var total = 0;
var Price = $('input[id^=Field_Price_]').val();
$.each($(Price), function(){
total += $(this).val();
});
$('#PrintSum').text(total);
So that won't work.
Do any know what is the problem? Thank you very much!

try something like this,Fiddle
var total = 0;
var Price = $('input[id^=Field_Price_]');
$.each($(Price), function(){
total += parseInt($(this).val());
});
$('#PrintSum').text(total);

use this javascript
$(':input[id^="Field_Price_"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="Field_Price_"]');
$inputs.each(function (index)
{
total += parseFloat($(this).val());
});
alert(total);
$('#PrintSum').text(total);
});
jsFiddle

What about this solution:
var $prices = $('input[id^=Field_Price_]'),
$amounts = $('input[id^=Field_Amount_]');
$prices.add($amounts).on('keyup', function() {
var total = 0;
$prices.each(function() {
total += $(this).val() * $(this).next().val() || 0;
});
$('#PrintSum').text(total.toFixed(2));
})
.trigger('keyup');
http://jsfiddle.net/UFSvF/
Here changing the price as well as an amount triggers total price recalculation.

I guess you should be parse the input value to an float.
var total = 0;
var Price = $('input[id^=Field_Price_]').val();
$.each($(Price), function(){
total += parseFloat($(this).val());
});
$('#PrintSum').text(total);

On jsfiddle, an example not using jquery, but you could modify to do testing there
var prices = document.querySelectorAll("[id^=Field_Price]"),
ammounts = document.querySelectorAll("[id^=Field_Amount]"),
subTotals = document.querySelectorAll("[id^=Field_SubTotal]"),
printSum = document.getElementById("PrintSum");
function sumIt() {
var total = 0;
Array.prototype.forEach.call(prices, function (price, index) {
var subTotal = (parseFloat(price.value) || 0) * (parseFloat(ammounts[index].value) || 0);
subTotals[index].value = subTotal.toFixed(2);
total += subTotal;
});
printSum.textContent = total.toFixed(2);
}
Array.prototype.forEach.call(prices, function (input) {
input.addEventListener("keyup", sumIt, false);
});
Array.prototype.forEach.call(ammounts, function (input) {
input.addEventListener("keyup", sumIt, false);
});
sumIt();
Here is a jquery version of above, on jsfiddle
var prices = $("input[id^=Field_Price_]"),
amounts = $("input[id^=Field_Amount_]"),
subTotals = $("input[id^=Field_SubTotal_]"),
printSum = $("#PrintSum");
function sumIt() {
var total = 0;
prices.each(function(index, price) {
var subTotal = (parseFloat(price.value) || 0) * (parseFloat(amounts.eq(index).val()) || 0);
subTotals.eq(index).val(subTotal.toFixed(2));
total += subTotal;
});
printSum.text(total.toFixed(2));
}
prices.on("keyup", sumIt);
amounts.on("keyup", sumIt);
sumIt();
I will modify my pure javascript version soon to show you how your further questioning can be achieved, without the need of including jquery.
It has now been updated so you can see how it works
And a jsperf showing the construction performance of the two