Click here to Skip to main content
14,694,017 members
Please Sign up or sign in to vote.
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:

<!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
Updated 3-Jun-20 2:43am
v2
Comments
Richard MacCutchan 2-Jun-20 12:22pm
   
What does "not working" mean?
Patrice T 2-Jun-20 12:23pm
   
Elaborate "its not working"
What do not match your expectations.
steph99999 2-Jun-20 12:24pm
   
The calculations doesn't call
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.

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.
<!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>
   
Assuming you mean that element "nani" doesn't get updated it is because you are attempting to set the value using
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
<input type="number" name="nani" required </p>
Try changing that to
<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
   
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!

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900