Develop Reference

How to ADD 2 Tax items in an Invoice after Sub-Total to add up in Total by Javascript

This is my Html code in my Invoice file:
<tr class="item-row">
<td>7.</td>
<td class="item-name">
<input type="text" name="i7_n" placeholder="Enter Item" required="required">
</td>
<td class="description">
<textarea name="i7_d" placeholder="Item Note" class="form-control"></textarea>
</td>
<td>
<input type="number" name="i7_q" step="1" min="0" class="qty">
</td>
<td>
<input type="number" name="i7_c" step="1" min="0" class="cost">
</td>
<td><span class="price">0.00</span></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line">Subtotal Rs.</td>
<td td class="total-value"><div id="subtotal">0.00</div></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line">CGST 2.5%</td>
<td class="total-value"><textarea id="cgst" placeholder="%">0.00</textarea></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line">SGST 2.5%</td>
<td class="total-value"><textarea id="sgst" placeholder="%">0.00</textarea></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line">Amount after GST </td>
<td class="total-value"><div id="total">0.00</div></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line">Amount Paid Rs.</td>
<td class="total-value"><textarea id="paid">0.00</textarea></td>
</tr>
<tr>
<td colspan="3" class="blank"></td>
<td colspan="2" class="total-line balance">Balance Due Rs.</td>
<td class="total-value balance"><div class="due">875.00</div></td>
</tr>
When i run my this following JS Code:-
//This Updates subtotal & total
function update_total() {
var total = 0;
$('.price').each(function(i){
price = $(this).html().replace("$","");
if (!isNaN(price)) total += Number(price);
});
total = roundNumber(total,2);
$('#subtotal').html(total);
// $('#total').html(total);
update_gst();
}
//this adds CGST & SGST in subtotal
function update_gst() {
var total = $("#subtotal").html().replace("$","") + $("#cgst").val().replace("$","") + $("#sgst").val().replace("$","");
total = roundNumber(total,2) ;
$('#total').html(total);
update_balance();
}
//this updates amount paid & outstanding at end
function update_balance() {
var due = $("#total").html().replace("$","") - $("#paid").val().replace("$","");
due = roundNumber(due,2);
$('.due').html(due);
}
//This updates item Qty * Item Price = Item Total
function update_price() {
var row = $(this).parents('.item-row');
var price = row.find('.cost').val().replace("$","") * row.find('.qty').val();
price = roundNumber(price,2);
isNaN(price) ? row.find('.price').html("N/A") : row.find('.price').html(price);
update_total();
}
This gives me my all balances Ok. My problem is I want to add 2 Taxes (CGST #2.5% & SGST #2.5%) [By using JS only] to Sub-Total to give Final Figures after taxes. . i think my code "update_gst()" has some issues.
Please Help me on how I can update my above JS code...

Javascript XPath table loop td's

I am trying to create a Chrome Extension that will extract some data from a table. I want to transform the TD's of the TR's in simple lines with each column separated by a pipe | character, ex:
01/01/2020 | XX | 57,43 | |
02/01/2020 | YY | 11,22 | |
Here is a part of it:
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
To iterate over it, I use XPath like this:
function DOMtoString(doc) {
let path_tr = '(//div[#class="contborda"])[4]/table[3]/tbody/tr[position()>1]';
var tr = doc.evaluate(path_tr, doc, null, XPathResult.ANY_TYPE, null);
let alertText = '';
let x = tr.iterateNext();
while (x) {
alertText += x.textContent;
x = tr.iterateNext();
}
return alertText;
}
Here I get the table (ignoring the first TR with column names), but the result is this (just some part of it):
<br> <br> 21/02/2020 <br> Concessionárias<br> <br> 57,43 <br> <br> Visualizar<br> enviar por email <br><br>
I see that XPath is adding BR's on it.
I try to loop over the TD's of these TR's with no success like this:
let path_td = '//td';
var td = tr.evaluate(path_td, tr, null, XPathResult.ANY_TYPE, null);
What is the correct way that I can interact over the TD's and get the raw text of them with no BR's?

Use innerText instead of textContent to avoid line breaks. You can use Document.querySelector() instead of XPath which will make DOM manipulation much easier.
CSS Selectors:
function DOMtoString() {
let lines = [];
let trs = document.querySelectorAll(
'div.contborda > table:nth-of-type(2) > tbody > tr:not(:first-child)'
);
trs.forEach(tr => {
let line = [];
let tds = tr.querySelectorAll('td');
tds.forEach(td => line.push(td.innerText.trim()));
lines.push(line.join('|'));
});
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>
If you have any other reasons you want to stick to using XPath, then you should use dot .// when you want to select nodes relative to nodeContext:
XPath:
function DOMtoString() {
let lines = [];
let path_tr = '//div[#class="contborda"]/table/tbody/tr[position()>1]';
let tr = document.evaluate(path_tr, document, null, XPathResult.ANY_TYPE, null);
let x = tr.iterateNext();
while (x) {
let line = [];
let path_td = './/td';
var td = document.evaluate(path_td, x, null, XPathResult.ANY_TYPE, null);
let y = td.iterateNext();
while (y) {
line.push(y.innerText.trim());
y = td.iterateNext();
}
lines.push(line.join('|'));
x = tr.iterateNext();
}
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>

object HTMLInputElement JavaScript error

So basically, I'm doing a webpage to calculate my school marks but I can't get it to print the result at the input value... Instead, it prints [object HTMLInputElement]
Here's my JavaScript code:
<script type="text/javascript"> </script>
<script>
window.onload = function () {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
}
function resultFunc() {
document.getElementById('result').value = result;
}
</script>
And here's the table with the inputs:
<table class="rwd-table">
<tr>
<th>المادة الدراسية</th>
<th>الدرجة العظمى</th>
<th>درجة الطالب</th>
</tr>
<tr>
<td data-th="Movie Title">القرآن الكريم</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="quran" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">التربية الإسلامية</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="islamic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة العربية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="arabic" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">اللغة الإنجليزية</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="english" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">البدنية</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="games" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الحاسوب</td>
<td data-th="Genre">20</td>
<td data-th="Year"> <input value="" id="pc" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الرياضيات</td>
<td data-th="Genre">80</td>
<td data-th="Year"> <input value="" id="maths" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الكيمياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="chem" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الفيزياء</td>
<td data-th="Genre">60</td>
<td data-th="Year"> <input value="" id="phys" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الأحياء</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="bio" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<td data-th="Movie Title">الإجتماعيات</td>
<td data-th="Genre">40</td>
<td data-th="Year"> <input value="" id="social" style="width: 70px;" type="text"/> </td>
</tr>
<tr>
<th>المجموع</th>
<th>500</th>
<th> <input style="width: 70px; background-color: gray;" id="result" value="" readonly /> </th>
</tr>
<tr>
<th style="font-size: 20px;">النسبة</th>
<th></th>
<th> <input style="width: 70px; background-color: gray;" value="" readonly /> </th>
</tr>
<tr>
<th></th>
<th> <input onClick="resultFunc()" type="submit" id="submit" value="اضغط هنا لحساب النسبة المئوية" /> </th>
<th></th>
</tr>
</table>
Sorry for the Arabic words, just look at the code :)
I've even tried to print the result in a cell instead of an input tag, but it gave me a similar error instead of printing the result...

The issue appears to be due to the calculation occurring during the window.onload event. In order to calculate the values you should be able to move the code from the onload event to the resultFunc function and it will allow you to calculate the total when you click the button.
function resultFunc() {
var quran = document.getElementById('quran').value;
var islamic = document.getElementById('islamic').value;
var arabic = document.getElementById('arabic').value;
var english = document.getElementById('english').value;
var games = document.getElementById('games').value;
var pc = document.getElementById('pc').value;
var maths = document.getElementById('maths').value;
var chem = document.getElementById('chem').value;
var phys = document.getElementById('phys').value;
var bio = document.getElementById('bio').value;
var social = document.getElementById('social').value;
var result = Number(quran) + Number(islamic) + Number(arabic) + Number(english) + Number(games) + Number(pc) + Number(maths) + Number(chem) + Number(phys) + Number(bio) + Number(social);
document.getElementById('result').value = result;
}
Also note the reason why you get [object HTMLInputElement] is due to the scoping of the variable result. Since you declare var result in resultFunc the value is immediately lost. [object HTMLInputElement] is rendered, because window.result is also a shortcut to the element in the HTML document with the id of result.

How do I put randomly generated numbers into a table?

I need to put 6 randomly generated numbers in a an HTML table, I was wondering what would be the best solution, this is my JS code :
function GenerateNumber(){
var sResultat = "";
var iCompteur;
for(iCompteur=0;iCompteur<=6;iCompteur++)
{
sResultat = Math.round(Math.random()* 18) + 1;
}
}
Would calling them with the AddEventListener work? I need to make it appear everytime I load the page, and of course, the numbers need to be different if I reload the page.
Here is my HTML code : (I put numbers temporarily to test my code and to show where I want them to appear)
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>

function generateNumber() {
var sResultat
var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"]
cells.forEach(function(cell) {
sResultat = Math.round(Math.random() * 18) + 1;
document.getElementsByClassName(cell)[0].innerText = sResultat
})
}
generateNumber()
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class="FOR">
</td>
<td class="DEX">
</td>
<td class="CON">
</td>
<td class="INT">
</td>
<td class="SAG">
</td>
<td class="CHA">
</td>
</tr>
</table>
</div>

function GenerateNumber(){
var tds = document.querySelectorAll('.table td');
return Array.prototype.forEach.call(tds, function(td){
td.innerHTML = Math.round(Math.random()*18) + 1;
});
}
window.onload = GenerateNumber;
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>

How to update values of label on Focus out jquery event

I am trying to update my gridview by calculating a few things like TotalPrice and TotalPriceGST. The calculation part works fine. I want to update the fields of TotalPrice and TotalPriceGST when i leave the UnitPriceTxt textbox (On Focus Out). But when i do it with the following code it updates the first row and doesn't allow me to write the price in the later textboxes. Please Help!
<div>
<table cellspacing="0" cellpadding="4" id="ContentPlaceHolder1_gvQuotationItems" style="color:#333333;width:900px;border-collapse:collapse;float: left">
<tr style="color:White;background-color:#F07323;font-weight:bold;">
<th scope="col">Product Code</th>
<th scope="col">Description</th>
<th scope="col">Sap Pack</th>
<th scope="col">Quantity</th>
<th scope="col">UnitPrice</th>
<th scope="col">Total Price</th>
<th scope="col">Total Price with GST</th>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;">
<td style="width:160px;">BCR123A-1EA</td>
<td style="width:250px;">23477, Reference ethanols (H, M, L) (for</td>
<td style="width:30px;">1</td>
<td style="width:60px;">12</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
<tr style="color:#284775;background-color:White;">
<td style="width:160px;">459-UP</td>
<td style="width:250px;">459 bubbler</td>
<td style="width:30px;">1</td>
<td style="width:60px;">123</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
<tr style="color:#333333;background-color:#F7F6F3;">
<td style="width:160px;">567-UP</td>
<td style="width:250px;">567 Unprepared Customer Bubbler Purchase</td>
<td style="width:30px;">1</td>
<td style="width:60px;">50</td>
<td>
<input type="text" id="UnitPriceTxt" style="width:50px;" />
</td>
<td style="width:60px;"></td>
<td style="width:60px;">
<label id="TotalPriceGST"></label>
</td>
</tr>
</table>
</div>
This is My Script:
$(function () {
$("#UnitPriceTxt").focusout(function () {
var TextBoxtxt = $('#<%=gvQuotationItems.ClientID %>').find('input:text[id$="UnitPriceTxt"]').val();
var TotalPriceLbl = $('#<%=gvQuotationItems.ClientID %>').find("#totalPrice");
var TotalPriceGSTLbl = $('#<%=gvQuotationItems.ClientID %>').find("#TotalPriceGST");
$("#<%=gvQuotationItems.ClientID %> tr").each(function () {
if (!this.rowIndex) return;
var Quantity = $(this).find("td:eq(3)").html();
var UnitPrce = $(this).find('input:text[id$="UnitPriceTxt"]').val();
var totalPrice = parseInt(Quantity) * parseInt(UnitPrce);
var GST = (parseInt(Quantity) * 17) / 100;
var TotalPriceGST;
TotalPriceGST = totalPrice + GST;
$(this).find("td:eq(5)").html('<label id="totalPrice" style="font-size:small" >' + totalPrice + ".Rs" + '</label>');
$(this).find("td:eq(6)").html('<label id="TotalPriceGST">' + TotalPriceGST + '</label>')
})
})
});

What you want is $('#UnitPriceTxt').blur(function(){...});
$.blur() is the "focus out" function you're looking for.