I have been struggling with a simple discount calculation feature where the price should update when a user enters a value. No matter how many times I try, the array values are always printed in the first row line. The issue seems to be related to printing an array, and I would appreciate any recommendations for videos or articles that can help me understand this topic better. Thank you.
<input type="number" id="inputValue">
<input type="button" value="Submit" id="submitBtn">
<table id='mytable'>
<thead>
<td>Discount Products</td>
<td>Price One</td>
<td>Price Two</td>
</thead>
<tbody id="tbody">
<tr>
<td>Product 1</td>
<td class="price-one one"> 100</td>
<td class="price-two one">200</td>
</tr>
<tr>
<td>Product 2</td>
<td class="price-one one"> 300</td>
<td class="price-two one">400</td>
</tr>
<tr>
<td>Product 3</td>
<td class="price-one one"> 500</td>
<td class="price-two one">600</td>
</tr>
<tr>
<td>Product 4</td>
<td class="price-one one"> 700</td>
<td class="price-two one">800</td>
</tr>
</tbody>
</table>
I have included my script below. However, I am unable to update the price cells as intended.
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function () {
const mytable = document.querySelector('#mytable #tbody');
const inputValue = document.getElementById('inputValue').value;
const prices = [];
for (i = 0; i < mytable.rows.length; i++) {
prices[i] = [];
for (j = 1; j < mytable.rows[i].cells.length; j++) {
const orginalPrice = mytable.rows[i].cells[j].innerText;
prices[i].push(parseFloat(orginalPrice) - (inputValue/100 * orginalPrice));
}
}
});