stackoom
  简体   繁体   中英

How do i get my function to work on every row of my table?

 原文  2022-06-11 08:28:37  0   1    javascript/ html-table

Question

I'm extremely new to Javascript and coding in general and having trouble with this. This is a book ordering system that calculates the price of an order by multiplying the unit price and quantity when I press. The unit prices and quantity have to be manually typed out in the table. The problem is the javascript function I wrote only worked with the the top most row and it does not seem to work with the other rows. Can I know how do I get my function to work with all the other rows on the table? 

 body{ font-family: 'Itim', cursive; background-image:url('../images/background.jpg') } table{ border-collapse: collapse; width: 90%; } tr,td{ border: 1px solid black; padding: 0.5rem; }.row{ text-align: center; background: skyblue; }.row1 td:nth-child(1) { text-align: right; }.row1:hover{ background-color: yellow; }.row1 select{ width: 100%; }.row2{ background: skyblue; } input{ width: 96.5%; } input td:nth-child(2,3){ text-align: left; } input[type="number"]{ text-align: right; } input.price:disabled{ background: silver; border: 2px solid black; text-align: right; color: black; } input[type=button]{ display: block; width: 18%; height: 25px; text-align: center; font-size: 12px; margin-right: 0; margin-left: auto; } input.totalprice{ background: silver; border: 2px solid black; display: block; text-align: right; color:black; height: 30px; width: 75%; margin-left: auto; margin-right: 0; font-size: 18px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 <html> <head> <title>Book Ordering System</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width", initial-scale="1.0"> <link rel="stylesheet" href="./css/book-oder.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet"> <script> function calculateTotal(){ var a = Number(document.getElementById('QTY').value); var b = Number(document.getElementById('PPRICE').value); var c = a * b; var total= document.getElementById('TOTAL'); total.value=c; } </script> </head> <body> <h1>Book Ordering System</h1> <table> <form action onclick="calculateTotal()"> <tr class="row"> <td><b>No.</b></td> <td><b>Book Tilte</b></td> <td><b>Author</b></td> <td><b>Category</b></td> <td><b>Unit Price</b></td> <td><b>Quantity</b></td> <td><b>Total</b></td> </tr> <tr class="row1"> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>4</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input class="price" value="0.00" name="TOTAL" id="TOTAL" disabled></td> </tr> <tr class="row1"> <td>5</td> <td><input type="text"></td> <td><input type="text"></td> <td> <select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" id="QTY"></td> <td><input value="0.00" disabled class="price" name="TOTAL" id="TOTAL"></td> </tr> <tr class="row2"> <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()"> </td> <td colspan="2"><input class="totalprice" value="0.00" disabled ></td> </tr> </form> </table> </body> </html>

1 answers

solution1
 1 ACCPTED  2022-06-11 09:49:26

updated: Add total sum calculation.

Your problem occurs because you using id's for multiple fields on the page. But a id is always unique. If you fetch the fields then you have to iterate over to calculate the row sum. 

 function calculateTotal(){ let sum = 0; const rows = document.querySelectorAll('.row1'); rows.forEach(r => { const a = Number(r.querySelector('.QTY').value); const b = Number(r.querySelector('.PPRICE').value); const c = a * b; sum += c; r.querySelector('.TOTAL').value = c; }); document.querySelector('.totalprice').value = sum; }
 body{ font-family: 'Itim', cursive; background-image:url('../images/background.jpg') } table{ border-collapse: collapse; width: 90%; } tr,td{ border: 1px solid black; padding: 0.5rem; }.row{ text-align: center; background: skyblue; }.row1 td:nth-child(1) { text-align: right; }.row1:hover{ background-color: yellow; }.row1 select{ width: 100%; }.row2{ background: skyblue; } input{ width: 96.5%; } input td:nth-child(2,3){ text-align: left; } input[type="number"]{ text-align: right; } input.price:disabled{ background: silver; border: 2px solid black; text-align: right; color: black; } input[type=button]{ display: block; width: 18%; height: 25px; text-align: center; font-size: 12px; margin-right: 0; margin-left: auto; } input.totalprice{ background: silver; border: 2px solid black; display: block; text-align: right; color:black; height: 30px; width: 75%; margin-left: auto; margin-right: 0; font-size: 18px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
 <h1>Book Ordering System</h1> <table> <form action onclick="calculateTotal()"> <tr class="row"> <td><b>No.</b></td> <td><b>Book Tilte</b></td> <td><b>Author</b></td> <td><b>Category</b></td> <td><b>Unit Price</b></td> <td><b>Quantity</b></td> <td><b>Total</b></td> </tr> <tr class="row1"> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>4</td> <td><input type="text"></td> <td><input type="text"></td> <td><select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" class="PPRICE" id="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input class="price TOTAL" value="0.00" name="TOTAL" disabled></td> </tr> <tr class="row1"> <td>5</td> <td><input type="text"></td> <td><input type="text"></td> <td> <select> <option disabled selected>Please choose the category...</option> <option value="Business">Business</option> <option value="Fiction">Fiction</option> <option value="Mathematics">Mathematics</option> <option value="Technology">Technology</option> </select> </td> <td><input type="number" value="0.00" min="0" step="any" name="PPRICE" class="PPRICE"></td> <td><input type="number" value="0" name="QTY" class="QTY"></td> <td><input value="0.00" disabled class="price TOTAL" name="TOTAL" ></td> </tr> <tr class="row2"> <td colspan="5"><input type="button" value="Calculate Grand Total Price" onclick="calculateTotal()"> </td> <td colspan="2"><input class="totalprice" value="0.00" disabled ></td> </tr> </form> </table>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I get my search function work to filter searched items from table? How do I get the move function to work in my game? How do I get my delete function to work in Vue JS? I am writing a Javascript function to to color every other row in a table a different color. Why doesn't my code work? How do I make the if/else statement get checked every time my function is called (JavaScript)? how do I get my background image to change every time the mouse moves using the onmousemove function? How do I get my page to display data that my functions process as they finish rather than when every function finishes How do I get my function to restart? How do i get my table's row information without an 'id'? How do I get slideUp() to work as intended on a table row?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM