Поскольку я новичок в javascript, я изо всех сил пытаюсь получить входные значения динамически генерируемого идентификатора.
var i = 0;
function addRow() {
var div = document.createElement('div');
div.className = 'rTableRow';
div.id = 'Taxrow' + i;
div.innerHTML =
'<div class="rTableCell"><input type="text" name="product'+i+'" id="product'+i+'" placeholder="Product Name"></div>\
<div class="rTableCell"><input type="text" name="price'+i+'" id="price'+i+'" placeholder="Item Price"></div>\
<div class="rTableCell"><input type="text" name="qty'+i+'" id="qty'+i+'" onchange="subTotal();" placeholder="Item Quantity"></div>\
<div class="rTableCell"><input type="text" name="tax'+i+'" id="tax'+i+'" onkeyup="Total();" placeholder="Tax Percentage"></div>\
<div class="rTableCell"><input name="subtotal'+i+'" type="text" id="subtotal'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="salestax'+i+'" type="text" id="salestax'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="gtotal'+i+'" type="text" id="gtotal'+i+'" size="10" disabled></div>\
<input type="button" value="-" onclick="removeRow(this)">';
document.getElementById('dyncalc').appendChild(div);
i=i+1;
}
function removeRow(input) {
document.getElementById('dyncalc').removeChild(input.parentNode);
}
/*
function setValue(node){
var price = document.getElementById(node.value).value;
//alert(price);
}
*/
function subTotal() {
/* var price = document.getElementById('price[i]').value;
var qty = document.getElementById('qty[i]').value;*/
var price = document.TaxCalculator.price.value;
var qty = document.TaxCalculator.qty.value;
var productPrice = price * qty;
document.TaxCalculator.subtotal.value = productPrice.toFixed(2);
return productPrice;
}
function Total() {
var subtotal = subTotal();
var stax = (document.TaxCalculator.tax.value) / 100 ;
tax = subtotal * stax ;
document.TaxCalculator.subtotal.value = subtotal.toFixed(2);
document.TaxCalculator.salestax.value = tax.toFixed(2);
var gtotal = subtotal + tax;
document.TaxCalculator.gtotal.value = gtotal.toFixed(2);
}
.taxCalculator h3{
text-align: center;
text-transform: uppercase;
padding: 10px;
color: #ffffff;
}
.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableHeading { display: table-header-group; }
.rTableBody { display: table-row-group; }
.rTableFoot { display: table-footer-group; }
.rTableCell, .rTableHead { display: table-cell; }
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Tax Calculator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="taxCalculator">
<div class="container">
<p></p>
<div class="card">
<h3 style="text-align: center;" class="card-header bg-info">Tax Caluculator </h3>
<p></p>
<div class="form-group d-flex justify-content-center">
<form action="" name="TaxCalculator" id="TaxCalculator" class="form-inline">
<div class="rTable" id="dyncalc">
<div class="rTableRow">
<div class="rTableHead"><input type="button" class="btn btn-info" value="AddItems" onclick="addRow()"></div>
</div>
<div class="rTableRow">
<div class="rTableHead"><label for="product" >Product Name</label></div>
<div class="rTableHead"><label for="price" >Price</label></div>
<div class="rTableHead"><label for="qty" >Item Qty</label></div>
<div class="rTableHead"><label for="tax" >Tax Percentage (%) </label></div>
<div class="rTableHead"><label for="subtotal" >Sub Total: </label></div>
<div class="rTableHead"><label for="salestax" >Tax :</label></div>
<div class="rTableHead"><label for="gtotal" >Grand Total: </label></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Я хочу получить входные значения Taxrow[i] id.Я устал onchange и var price = document.TaxCalculator.price[i].value; Я знаю, я сделал что-то не так.а также я использовал document.getElementById(node.value).value, используя onchange(getValue.this), помогите мне достичь этого.