Tuesday, August 2, 2022

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

      ,      No comments   

Issue

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>


Solution

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>



Answered By - Maik Lowrey
Answer Checked By - Pedro (PHPFixing Volunteer)

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...