Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript facing the issue in creating the JS function that will add the price of each item and give the total amount at the last row of the table.

ShwetankJoshi

ShwetankJoshi

Coder
Creating a Invoice maker website using HTML , CSS and JS , which is my clg mini project , i hava to create a JS funcition that will multiply the unit cost and quantity to give price and another function that will give the total of the price of each item at last row of the table. the refrence image of my project is attached
HTML: 
<body>
    <div class="container">
        <header>

            <div id="primary_header">
                <div class="logo">
                    <img src="/images/logo.png" alt="">
                </div>
                <h2 id="invoice">INVOICE</h2>
            </div>

            <div class="secondary_header">

                <div class="left">

                    <div class="info">
                        <p id="c_name">Company Name- Lorem, ipsum.</p>
                        <p> <b>Address- </b>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur, itaque.</p>
                        <p>
                            <b>Contact us- </b>02582298439</p>
                    </div>
                </div>


                <div class="right">

                    <table id="meta">
                        <tr>
                            <td class="meta-head">Invoice No #
                            </td>
                            <td>001</td>
                        </tr>
                        <tr>

                            <td class="meta-head">Date</td>
                            <td id="date"></td>
                        </tr>
                    </table>


                </div>


        </header>
        <div class="customer">
            <p><b>Bill To:</b><br></p>
            <textarea id="address" placeholder="Customer Info...."></textarea>
        </div>
        <table id="items">

            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Price</th>
                <td>
                    <div class="action_container">
                        <button class="success" onclick="create_tr('table_body')">
                          <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <tbody id="table_body">
                <tr class="item-row">
                    <td class="item-name">
                        <div class="Item"><input type="text" name="" placeholder="Enter Item..."><br>
                        </div>
                    </td>
                    <td class="description">
                        <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td>
                    <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td>
                    <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td>
                    <td><span class="price ">0.00</span></td>
                    <td>
                        <div class="action_container">
                            <button class="danger" onclick="remove_tr()">
                          <i class="fa fa-close"></i>
                        </button>
                        </div>
                    </td>

                </tr>
                <tr id="ref_Node">
                    <td colspan="2 " class="blank "> </td>
                    <td colspan="2 " class="total-line ">Subtotal</td>
                    <td class="total-value ">
                        <div id="subtotal ">0.00</div>
                    </td>
                </tr>
                <tr>

                    <td colspan="2 " class="blank "></td>
                    <td colspan="2 " class="total-line ">Total</td>
                    <td class="total-value ">
                        <div id="total ">0.00</div>
                    </td>
                </tr>
            </tbody>

        </table>
        </table>
        <div class="terms ">
            Terms and Conditions are Applied.

        </div>

        </div>
        <footer id="footer "></footer>

    </div>



</body>
 
Sort by date Sort by votes
ShwetankJoshi said:
Creating a Invoice maker website using HTML , CSS and JS , which is my clg mini project , i hava to create a JS funcition that will multiply the unit cost and quantity to give price and another function that will give the total of the price of each item at last row of the table. the refrence image of my project is attached
HTML: 
<body>
    <div class="container">
        <header>

            <div id="primary_header">
                <div class="logo">
                    <img src="/images/logo.png" alt="">
                </div>
                <h2 id="invoice">INVOICE</h2>
            </div>

            <div class="secondary_header">

                <div class="left">

                    <div class="info">
                        <p id="c_name">Company Name- Lorem, ipsum.</p>
                        <p> <b>Address- </b>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Pariatur, itaque.</p>
                        <p>
                            <b>Contact us- </b>02582298439</p>
                    </div>
                </div>


                <div class="right">

                    <table id="meta">
                        <tr>
                            <td class="meta-head">Invoice No #
                            </td>
                            <td>001</td>
                        </tr>
                        <tr>

                            <td class="meta-head">Date</td>
                            <td id="date"></td>
                        </tr>
                    </table>


                </div>


        </header>
        <div class="customer">
            <p><b>Bill To:</b><br></p>
            <textarea id="address" placeholder="Customer Info...."></textarea>
        </div>
        <table id="items">

            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Price</th>
                <td>
                    <div class="action_container">
                        <button class="success" onclick="create_tr('table_body')">
                          <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <tbody id="table_body">
                <tr class="item-row">
                    <td class="item-name">
                        <div class="Item"><input type="text" name="" placeholder="Enter Item..."><br>
                        </div>
                    </td>
                    <td class="description">
                        <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td>
                    <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td>
                    <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td>
                    <td><span class="price ">0.00</span></td>
                    <td>
                        <div class="action_container">
                            <button class="danger" onclick="remove_tr()">
                          <i class="fa fa-close"></i>
                        </button>
                        </div>
                    </td>

                </tr>
                <tr id="ref_Node">
                    <td colspan="2 " class="blank "> </td>
                    <td colspan="2 " class="total-line ">Subtotal</td>
                    <td class="total-value ">
                        <div id="subtotal ">0.00</div>
                    </td>
                </tr>
                <tr>

                    <td colspan="2 " class="blank "></td>
                    <td colspan="2 " class="total-line ">Total</td>
                    <td class="total-value ">
                        <div id="total ">0.00</div>
                    </td>
                </tr>
            </tbody>

        </table>
        </table>
        <div class="terms ">
            Terms and Conditions are Applied.

        </div>

        </div>
        <footer id="footer "></footer>

    </div>



</body>
Click to expand...
Hi there, can you attach your reference image again, on this post?
 
Upvote 0 Downvote
I clean up this please use ident, you had doubled the tags </div> </table> its a nonsense, always open in browser like Firefox Developer and inspect your code I'll help you find the errors. Try use atom editor or brakets ide they have html verifier

Here the code https://jsfiddle.net/pedrohsdeus/2ydfb8ue/3/

HTML: 
<body>
    <div class="container">
        <header>

            <div id="primary_header">
                <div class="logo">
                    <img src="/images/logo.png" alt="">
                </div>
                <h2 id="invoice">INVOICE</h2>
            </div>

            <div class="secondary_header">
                <div class="left">

                    <div class="info">
                        <p id="c_name">Company Name</p>
                        <p> <b>Address </b>, itaque.</p>
                        <p>
                         <b>Contact us- </b>02582298439</p>
                    </div>
                </div>

                <div class="right">
                    <table id="meta">
                        <tr>
                            <td class="meta-head">Invoice No #
                            </td>
                            <td>001</td>
                        </tr>
                        <tr>
                            <td class="meta-head">Date</td>
                            <td id="date"></td>
                        </tr>
                    </table>

                </div>
              </div>
        </header>
        <div class="customer">
            <p><b>Bill To:</b><br></p>
            <textarea id="address" placeholder="Customer Info...."></textarea>
        </div>
        <table id="items">
            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Price</th>
                <td>
                    <div class="action_container">
                        <button class="success" onclick="create_tr('table_body')">
                          <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <tbody id="table_body">
                <tr class="item-row">
                    <td class="item-name">
                        <div class="Item">
                          <input type="text" name="" placeholder="Enter Item..."><br>
                        </div>
                    </td>
                    <td class="description">
                        <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td>
                    <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td>
                    <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td>
                    <td><span class="price ">0.00</span></td>
                    <td>
                        <div class="action_container">
                            <button class="danger" onclick="remove_tr()">
                          <i class="fa fa-close"></i>
                        </button>
                        </div>
                    </td>

                </tr>
                <tr id="ref_Node">
                    <td colspan="2 " class="blank "> </td>
                    <td colspan="2 " class="total-line ">Subtotal</td>
                    <td class="total-value ">
                        <div id="subtotal ">0.00</div>
                    </td>
                </tr>
                <tr>

                    <td colspan="2 " class="blank "></td>
                    <td colspan="2 " class="total-line ">Total</td>
                    <td class="total-value ">
                        <div id="total ">0.00</div>
                    </td>
                </tr>
            </tbody>

        </table>
        <div class="terms ">
            Terms and Conditions are Applied.

        </div>

        <footer id="footer "></footer>

    </div>



</body>
 
Upvote 0 Downvote
ShwetankJoshi said:
didn't get posted
Click to expand...

Ordep-20 said:
Are you using bootstrap CSS or Jquery Css???

I see here


</table>
</table>
<div class="terms ">
Terms and Conditions are Applied.

</div>

</div>
<footer id="footer "></footer>

</div>

Thats your problem
Click to expand...
no I am just using basic CSS not any framework , As i am beginner to web development. I only used one table for putting items in Invoice
 
Upvote 0 Downvote
yes it is
Ordep-20 said:
I clean up this please use ident, you had doubled the tags </div> </table> its a nonsense, always open in browser like Firefox Developer and inspect your code I'll help you find the errors. Try use atom editor or brakets ide they have html verifier

Here the code https://jsfiddle.net/pedrohsdeus/2ydfb8ue/3/

HTML: 
<body>
    <div class="container">
        <header>

            <div id="primary_header">
                <div class="logo">
                    <img src="/images/logo.png" alt="">
                </div>
                <h2 id="invoice">INVOICE</h2>
            </div>

            <div class="secondary_header">
                <div class="left">

                    <div class="info">
                        <p id="c_name">Company Name</p>
                        <p> <b>Address </b>, itaque.</p>
                        <p>
                         <b>Contact us- </b>02582298439</p>
                    </div>
                </div>

                <div class="right">
                    <table id="meta">
                        <tr>
                            <td class="meta-head">Invoice No #
                            </td>
                            <td>001</td>
                        </tr>
                        <tr>
                            <td class="meta-head">Date</td>
                            <td id="date"></td>
                        </tr>
                    </table>

                </div>
              </div>
        </header>
        <div class="customer">
            <p><b>Bill To:</b><br></p>
            <textarea id="address" placeholder="Customer Info...."></textarea>
        </div>
        <table id="items">
            <tr>
                <th>Item</th>
                <th>Description</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Price</th>
                <td>
                    <div class="action_container">
                        <button class="success" onclick="create_tr('table_body')">
                          <i class="fa fa-plus"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <tbody id="table_body">
                <tr class="item-row">
                    <td class="item-name">
                        <div class="Item">
                          <input type="text" name="" placeholder="Enter Item..."><br>
                        </div>
                    </td>
                    <td class="description">
                        <textarea id=" description " type="text " name=" " placeholder="Enter Description... "></textarea></td>
                    <td class="cost "><input type="number" name=" " placeholder="Enter Cost... "></td>
                    <td class="qty "><input type="number" name=" " placeholder="Enter Quantity... "></td>
                    <td><span class="price ">0.00</span></td>
                    <td>
                        <div class="action_container">
                            <button class="danger" onclick="remove_tr()">
                          <i class="fa fa-close"></i>
                        </button>
                        </div>
                    </td>

                </tr>
                <tr id="ref_Node">
                    <td colspan="2 " class="blank "> </td>
                    <td colspan="2 " class="total-line ">Subtotal</td>
                    <td class="total-value ">
                        <div id="subtotal ">0.00</div>
                    </td>
                </tr>
                <tr>

                    <td colspan="2 " class="blank "></td>
                    <td colspan="2 " class="total-line ">Total</td>
                    <td class="total-value ">
                        <div id="total ">0.00</div>
                    </td>
                </tr>
            </tbody>

        </table>
        <div class="terms ">
            Terms and Conditions are Applied.

        </div>

        <footer id="footer "></footer>

    </div>



</body>
Click to expand...
Yes, it is a bit messy . sometimes you can not
Ordep-20 said:
Bootstrap CSS is simple way to develop a pc/mobile friendly website
Click to expand...
yes, planning to learn it after i get a good hands on javascript. plz help me in this
 
Upvote 0 Downvote
ShwetankJoshi said:
yes it is

Yes, it is a bit messy . sometimes you can not

yes, planning to learn it after i get a good hands on javascript. plz help me in this
Click to expand...
Yes, see the other post I put a reply there, In the picture have this fields Unity Cost And Quantity and the price. You want multiply the Cost X Quantity and put the value in Price, and if have more lines you need sum all totals in one place .

ok I'm make a test html and put here
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom