2

I have a school project to make a book ordering system using HTML and javascript we are required to use javascript to get the total price of a book by multiplying the quantity field by the unit price felid and then we have to sum all the total price column to get grand total price. my question is how will the javascript look like I tried some functions but it does not seem to work. here is my HTML file. can you help me write a function that satisfies the requirements

<head> <h1 style="font-family:times new roman; font-size: 18pt">Book Ordering Seystem</h1>
    <link rel="stylesheet" href="homestyle.css">
</head>
<br>
<table class="tg" id ="table">
    <thead>
    <tr>
        <th class="tg-eh3c">No.</th>
        <th class="tg-qu9t">Book Title</th>
        <th class="tg-qu9t">Author </th>
        <th class="tg-qu9t">Category</th>
        <th class="tg-qu9t">Unit price</th>
        <th class="tg-eh3c">Quantity</th>
        <th class="tg-eh3c">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="tg-nt2e">1</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up1" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn1" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total1" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly value=0>
        </td>
    </tr>

    <tr>
        <td class="tg-nt2e">2</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up2" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn2" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total2" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">3</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" id="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up3" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn3" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total3" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">4</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up4" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn4" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total4" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">5</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up5" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn5" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total5" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-ts62" colspan="6"><button id="result" type="button" onClick="multiply(); calculatetotal();" style="float: right;" >Calculate Grand Total Price</button></td>

        <td class="tg-rviu"><input type="number" placeholder="0.00" step="0.00" style="text-align: right; background-color:silver; font-size: 18pt" readonly></td>
    </tr>
    </tbody>
</table>
Improve this question
1

1 Answer 1

Reset to default
1

You have to take a look at your code: Every opening tag needs a corresponding closing tag. Every id had to be unique otherwise use classes. Total and totalsum don't need the up and down buttons they are only readable.

For multiplyfirst get the number of rows from the table for the indexes. Than you can get for every row with getElementById the element for quantity and price.With value you can get the value. Multiply and wirte it in the sumfield from this row.
For calculating just get the sums from each row calculate the totalsum and write it in the field.

function multiply() {
  let rows = document.querySelectorAll('table.tg tbody tr').length;

  for (let i=1; i<rows; i++) {
    let price = document.getElementById('up' + i).value;
    let quantity = document.getElementById('qn' + i).value;
    let sum = price*quantity;
    document.getElementById('total' + i).value = sum;
  }
}

function calculatetotal(){
  let rows = document.querySelectorAll('table.tg tbody tr').length;
  let sum = 0;
    
  for (let i=1; i<rows; i++) {
    let price = parseInt(document.getElementById('total' + i).value);
    sum += price;
  }
  
  document.getElementById('totalSum').value = sum;
}
<head> <h1 style="font-family:times new roman; font-size: 18pt">Book Ordering Seystem</h1>
    <link rel="stylesheet" href="homestyle.css">
</head>
<br>
<table class="tg" id ="table">
    <thead>
    <tr>
        <th class="tg-eh3c">No.</th>
        <th class="tg-qu9t">Book Title</th>
        <th class="tg-qu9t">Author </th>
        <th class="tg-qu9t">Category</th>
        <th class="tg-qu9t">Unit price</th>
        <th class="tg-eh3c">Quantity</th>
        <th class="tg-eh3c">Total</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="tg-nt2e">1</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up1" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn1" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total1" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly value=0>
        </td>
    </tr>

    <tr>
        <td class="tg-nt2e">2</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up2" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn2" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total2" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">3</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" id="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up3" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn3" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total3" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">4</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up4" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn4" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total4" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-nt2e">5</td>
        <td class="tg-4msd"><input type="text"></td>
        <td class="tg-v4tt"><input type="text"></td>
        <td class="tg-v4tt">
            <select name="Category" class="Category">
                <option value="Category">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 class="tg-0tzc"><input id="up5" type="number" placeholder="0.00" step="0.00" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="qn5" type="number" placeholder="0" step="0" style="text-align: right"></td>
        <td class="tg-kgwd"><input id="total5" type="number" placeholder="0.00" step="0.00" style="text-align: right ; background-color:silver"readonly></td>
    </tr>
    <tr>
        <td class="tg-ts62" colspan="6"><button id="result" type="button" onClick="multiply(); calculatetotal();" style="float: right;" >Calculate Grand Total Price</button></td>

        <td class="tg-rviu"><input id='totalSum' type="number" placeholder="0.00" step="0.00" style="text-align: right; background-color:silver; font-size: 18pt" readonly></td>
    </tr>
    </tbody>
</table>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.