Whats wrong with my code in this calculation

Question

1.00/5 (1 vote)

See more:

I am trying to do multiple calculation in one time but its not working
may i know whats happen?

What I have tried:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<img src="lempeng2.jpg" alt="lempeng" style="width:700px;height:100px;">
    <meta charset="UTF-8">
    <title>prehot1</title>
    <style type="text/css">
    
    ul {width: 5000px; margin: 100px auto; overflow: hidden;}
    /*代码开始*/
    li {
        /* 这些都不重要 */
        float: left;width: 200px;background: #FFFFFF;height: 350px;margin-right: 10px;
        /* 重点 */
        text-align: center;
    }
    /* 重点 */  display: inline-block使P的宽度根据文字的宽度伸缩
    p {
        display: inline-block;
        text-align: left;
    }
    </style>
	
    <script>
        getPrice = function() {
            
            var numVal2 = Number(document.getElementById("q1").value) ;
            var totalValue = 6.99*  numVal2
			document.getElementById("demo").value =totalValue.toFixed();
        
		    var numVal3 = Number(document.getElementById("q2").value) ;
            var totalValue = 2.55*  numVal3
			document.getElementById("nani").value =totalValue.toFixed();
       }
    </script>
</head>
<body>
    
      <div style="text-align:center">  <h2>Your Order  </h2>
<p>Customer ID: <input type="text" name="id" required />   Customer Phone: <input type="text" name="phone" required /></p>
</div>
<ul>
     <li><p> Order item</p><p>Lempang pisang : </p><p>Lempang kelapa keju:</p><p>Lempang sardin:</p><p>Lempang sayur:</p></li>
    <li><p> Price(RM) </p> <p><input type="number" disabled="disabled" value="6.99"> </p><p><input type="number" disabled="disabled" value="2.55"> </p><p><input type="number" disabled="disabled" value="5.55"></p><p><input type="number" disabled="disabled" value="2.99"> </p></li>
	  <li><p>Quantity required </p> <p><input type="number" id="q1" required </p><p><input type="number" name="q2" required </p> <p><input type="number" name="q3" required </p><p><input type="number" name="q4" required </p><p>Total Price Point :</p><p>Discount :</p><p><h4>AFTER DISCOUNT(RM):</h4></p></li>
	    <li><p>Total Price</p> <p><input type="number" id="demo" required </p> <p><input type="number" name="nani" required </p> <p><input type="number" name="nano" required </p><p><input type="number" name="nana" required </p><p><input type="number" name="name" required </p><p><input type="number" name="name" required </p><p><input type="number" name="name" required </p></li>
		  <li><p>Point</p> <p><input type="number" name="name" required </p> <p><input type="number" name="name" required </p> <p><input type="number" name="name" required </p> <p><input type="number" name="name" required </p> <p><input type="number" name="name" required </p></li>
		
</ul>
<button onclick="getPrice() ">Process</button>
<button type="Reset" onclick="return myFunction()">Reset</button>
</body>
</html>

Posted 2-Jun-20 6:00am

steph99999

Updated 3-Jun-20 1:43am

Richard MacCutchan

v2

Add a Solution

Comments

Richard MacCutchan 2-Jun-20 12:22pm

What does "not working" mean?

steph99999 2-Jun-20 12:24pm

The calculations doesn't call

Patrice T 2-Jun-20 12:23pm

Elaborate "its not working"
What do not match your expectations.

steph99999 2-Jun-20 12:25pm

The calculations doesn't come out the answer

Patrice T 2-Jun-20 12:31pm

Use Improve question to update your question.
So that everyone can pay attention to this information.

Richard MacCutchan 2-Jun-20 12:34pm

What does that mean? We have no idea what answer you expect to see and what answer you do see. Please don't try to write the shortest possible comment, but provide full details of what is happening.

Richard MacCutchan 3-Jun-20 6:01am

That is because a number of your text boxes do not have a valid id attribute.

2 solutions

Solution 2

There are a number of things wrong. First the input fields are not correctly identified so you cannot capture or update many of the fields. Secondly your calculation function only tries to calculate the first two items. I have modified your code to provide a partial solution which should help you to understand what more is needed. Also I have no idea what other calculations are required.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<img src="lempeng2.jpg" alt="lempeng" style="width:700px;height:100px;">
    <meta charset="UTF-8">
    <title>prehot1</title>
    <style type="text/css">
    
    ul {width: 5000px; margin: 100px auto; overflow: hidden;}
    
    li {
        /* 这些都不重要 */
        float: left;width: 200px;background: #FFFFFF;height: 350px;margin-right: 10px;
        /* 重点 */
        text-align: center;
    }
    /* 重点  */ display: inline-block - P will resize according to text width
    p {
        display: inline-block;
        text-align: left;
    }
    </style>
	
    <script>
        getPrice = function() {
            for (i = 1; i <= 4; i++) {
                // this loop allows you to select each set of input fileds by id.
                // those with ids p1,p2 etc are the price fields,
                // q1, q2 etc are the quantities,
                // tot1, tot2 etc are the calculated totals.
                // No idea what the "Point" boxes are for, or how to calculate discounts
                var id = "p" + i;
                var price = Number(document.getElementById(id).value);
                id = "q" + i;
                var qty = Number(document.getElementById(id).value);
                var total = price * qty;
                id = "tot" + i;
                document.getElementById(id).value = total.toFixed();
            }
       }
    </script>
</head>
<body>
    
      <div style="text-align:center">  <h2>Your Order  </h2>
<p>Customer ID: <input type="text" name="id" required />   Customer Phone: <input type="text" name="phone" required /></p>
</div>
<ul>
<!-- tidied up these LI items to make the code more readable, and added id fields for the
     price, quantity and total boxes. Point and Discount boxes still to do -->
     <li><p> Order item</p>
        <p>Lempang pisang : </p>
        <p>Lempang kelapa keju:</p>
        <p>Lempang sardin:</p>
        <p>Lempang sayur:</p></li>
    <li><p> Price(RM) </p> 
        <p><input type="number" id="p1" disabled="disabled" value="6.99"> </p>
        <p><input type="number" id="p2" disabled="disabled" value="2.55"> </p>
        <p><input type="number" id="p3" disabled="disabled" value="5.55"></p>
        <p><input type="number" id="p4" disabled="disabled" value="2.99"> </p></li>
      <li><p>Quantity required </p> 
        <p><input type="number" id="q1" required </p>
        <p><input type="number" id="q2" required </p> 
        <p><input type="number" id="q3" required </p>
        <p><input type="number" id="q4" required </p>
        <p>Total Price Point :</p>
        <p>Discount :</p>
        <p><h4>AFTER DISCOUNT(RM):</h4></p></li>
        <li><p>Total Price</p> 
            <p><input type="number" id="tot1" required </p> 
            <p><input type="number" id="tot2" required </p> 
            <p><input type="number" id="tot3" required </p>
            <p><input type="number" id="tot4" required </p>
            <p><input type="number" name="name" required </p>
            <p><input type="number" name="name" required </p>
            <p><input type="number" name="name" required </p></li>
          <li><p>Point</p> <p><input type="number" name="name" required </p> 
            <p><input type="number" name="name" required </p> 
            <p><input type="number" name="name" required </p> 
            <p><input type="number" name="name" required </p> 
            <p><input type="number" name="name" required </p></li>
		
</ul>
<button onclick="getPrice() ">Process</button>
<button type="Reset" onclick="return myFunction()">Reset</button>
</body>
</html>

Posted 3-Jun-20 1:44am

Richard MacCutchan

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CHill60 · Accepted Answer · 2020-06-02T06:38:00

Solution 1

Assuming you mean that element "nani" doesn't get updated it is because you are attempting to set the value using

JavaScript

document.getElementById("nani").value =totalValue.toFixed();

and you do not have any elements with that Id.

You do have an element with that name though

HTML

<input type="number" name="nani" required </p>

Try changing that to

HTML

<input type="number" id="nani" required </p>

Edit: Given that you have more named elements than those with Ids it might be better for you to switch to using Document.getElementsByName()[^] instead

Posted 2-Jun-20 6:38am

CHill60

Updated 2-Jun-20 21:50pm

v2

Comments

Richard MacCutchan 2-Jun-20 12:59pm

+5. The same applies to the reference to q2, and I suspect everything else.

CHill60 3-Jun-20 3:47am

Thank you. I hadn't actually noticed q2,q2 and q4! q1 is ok as is demo in the next group but they appear to be the only ones :-)
Given that fact I'm going to suggest the OP getElementsByName instead.

Richard MacCutchan 3-Jun-20 3:56am

Yes, but look how many of them have name="name".

Maciej Los 3-Jun-20 5:57am

5ed!