1. Zuhause
  2. Frage und Antwort
  3. Javascript Tabelle Rechnung

Javascript Tabelle Rechnung

2017-11-22 1 views
0

Ich habe eine schwierige Zeit, dies zu arbeiten. Ich kann ziemlich viel HTML anzeigen. Ich bin neu in Javascript, ich weiß nicht, wie es funktioniert. Insbesondere der Mengenmultiplikator, Hinzufügen der Gesamtspalte und Abrufen der Ergebnisse dieser Funktionen in den Elementen. Bitte helfen Sie!Javascript Tabelle Rechnung

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form> 
    <strong>Invoice #</strong> 
    <input class="countit"> 
      <table> 
       <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th> 
      <tr> 
      <td><select name="merch1" id="merch1" oninput="calcPrice('1')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select> 
      </td> 
      <td><input type="number" min="0" name="quantity1" id="quantity1" oninupt="multiplyQuantity('1')"></td> 
      <td><input type="text" name="calculated1" id="calculated1" disabled></td> 
      <td><input onblur="findTotal()" type="text" name="pretotal" id="total1"></td> 
      </tr> 

       <br> 

      <tr> 
      <td><select name="merch2" id="merch2" oninput="calcPrice('2')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select></td> 
      <td><input type="number" min="0" name="quantity2" id="quantity2" oninupt="multiplyQuantity('2')"></td> 
      <td><input type="text" name="calculated2" id="calculated2" disabled></td> 
      <td><input onblur="findTotal()" type="text" name="pretotal" id="total2"></td> 
      </tr> 

       <br> 

      <tr> 
      <td><select name="merch3" id="merch3" oninput="calcPrice('3')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select></td> 
      <td><input type="number" min="0" name="quantity3" id="quantity3" oninupt="multiplyQuantity('3')"></td> 
      <td><input type="text" name="calculated3" id="calculated3" disabled></td> 
      <td><input onblur="findTotal()" type="text" name="pretotal" id="total3"></td> 
      </tr> 

       <br> 

      <tr> 
      <td></td> 
      <td></td> 
      <td style="text-align:right"><strong>Total:</strong></td> 
      <td><input type="text" name="total" id="total" disabled></td></tr> 
      </table> 

       <br> 

      <b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br> 
      <button type="submit" value="Submit">Submit</button> 
      <button type="reset" value="Reset">Reset</button> 

      </form> 

<script language="javascript" type="text/javascript"> 
function calPrice(x){ 
    var item = document.getElementById("merch"+i).value; 
    var price; 
    switch(item){ 
      case("tshirt"): 
       price = 10; 
       break; 
      case("longsleeve"): 
       price = 20; 
       break; 
      case("hoodie"): 
       price = 26; 
       break; 
      case("cd"): 
       price = 10; 
       break; 
      case("tape"): 
       price = 7; 
       break; 
      case("lp"): 
       price = 17; 
       break; 
     } 
     document.getElementById("price"+i).value = price; 
    } 

    function multiplyQuantity(){ 
     var "calculated"+y = price * document.getElementById("quantity"+y).value; 
      document.getElementById("total"+y).value = calculated; 
    } 


    function findTotal(){   
     var arr = document.getElementsByName('pretotal') 
     var tot=0; 
     for(var i=0;i<arr.length;i++){ 
      if(parseInt(arr[i].value)) 
       tot += parseInt(arr[i].value); 
     } 
     document.getElementById('total').value = tot; 
    } 
    </script> 

</body> 
</html>

Quelle

2017-11-22 adjr90

Antwort

0

Es gibt einige Fehler in Ihrem Code (Benennung von Variablen und Funktionen, die nicht übereinstimmen), und es ist ein viel besserer Weg, dies zu tun, dann, was Sie jetzt tun, aber um nicht die Sache noch komplizierter mehr Ich habe nur die Fehler behoben.

Hier ist Ihr Arbeitscode:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form> 
    <strong>Invoice #</strong> 
    <input class="countit"> 
    <table> 
    <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th> 
    <tr> 
     <td> 
     <select name="merch1" id="merch1" oninput="calcPrice('1')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
     </select> 
     </td> 
     <td> 
     <input type="number" min="0" value="0" name="quantity1" id="quantity1" onchange="calcPrice('1')"> 
     </td> 
     <td> 
     <input type="text" name="calculated1" id="calculated1" disabled> 
     </td> 
     <td> 
     <input type="text" name="pretotal" id="total1"> 
     </td> 
    </tr> 
    <br> 
    <tr> 
     <td> 
     <select name="merch2" id="merch2" oninput="calcPrice('2')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
     </select> 
     </td> 
     <td> 
     <input type="number" min="0" value="0" name="quantity2" id="quantity2" onchange="calcPrice('2')"> 
     </td> 
     <td> 
     <input type="text" name="calculated2" id="calculated2" disabled> 
     </td> 
     <td> 
     <input type="text" name="pretotal" id="total2"> 
     </td> 
    </tr> 
    <br> 
    <tr> 
     <td> 
     <select name="merch3" id="merch3" oninput="calcPrice('3')"> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
     </select> 
     </td> 
     <td> 
     <input type="number" min="0" value="0" name="quantity3" id="quantity3" onchange="calcPrice('3')"> 
     </td> 
     <td> 
     <input type="text" name="calculated3" id="calculated3" disabled> 
     </td> 
     <td> 
     <input type="text" name="pretotal" id="total3"> 
     </td> 
    </tr> 
    <br> 
    <tr> 
     <td></td> 
     <td></td> 
     <td style="text-align:right"> 
     <strong>Total:</strong> 
     </td> 
     <td> 
     <input type="text" name="total" id="total" disabled> 
     </td> 
    </tr> 
    </table> 
    <br> 
    <b> 
    Comment: 
    </b> 
    <br> 
    <textarea rows="4" cols="50"></textarea> 
    <br> 
    <button type="submit" value="Submit">Submit</button> 
    <button type="reset" value="Reset">Reset</button> 
</form> 
    <script language="javascript" type="text/javascript"> 
    function calcPrice(x){ 
     var item = document.getElementById("merch"+x).value; 
     var price; 
     switch(item){ 
     case("tshirt"): 
      price = 10; 
      break; 
     case("longsleeve"): 
      price = 20; 
      break; 
     case("hoodie"): 
      price = 26; 
      break; 
     case("cd"): 
      price = 10; 
      break; 
     case("tape"): 
      price = 7; 
      break; 
     case("lp"): 
      price = 17; 
      break; 
     } 
     multiplyQuantity(price,x); 
     findTotal(); 
    } 

    function multiplyQuantity(price,index){ 
     var calculated = price * document.getElementById("quantity"+index).value; 
     document.getElementById("total"+index).value = calculated; 
     document.getElementById("calculated"+index).value = price; 
    } 

    function findTotal(){ 
     var total = [1,2,3] 
     //get total values 
     .map(x=>document.getElementById("total"+x).value||"0") 
     //convert to number 
     .map(x=>x*1) 
     //sum of numbers 
     .reduce(
      (acc,item)=>acc+item 
      ,0 
     ); 
     document.getElementById('total').value = total; 
    } 
    </script> 
</body> 
</html>

Quelle

2017-11-22 07:02:47 HMR

0

ich ein paar Änderungen vorgenommen. Ich änderte 'oninput' zu 'onchange' an allen Elementen. Auch geänderte Variablennamen.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form> 
    <strong>Invoice #</strong> 
    <input class="countit"> 
      <table> 
       <th>Item</th><th>Quantity</th><th>Price</th><th>Total</th> 
      <tr> 
      <td><select name="merch1" id="merch1" onchange="calPrice('1');"> 
      <option value="">Please select</option>   
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select> 
      </td> 
      <td><input type="number" min="0" name="quantity1" id="quantity1" onchange="multiplyQuantity('1');"></td> 
      <td><input type="text" name="price1" id="price1" disabled></td> 
      <td><input onblur="findTotal();" type="text" name="pretotal" id="total1"></td> 
      </tr> 

       <br> 

      <tr> 
      <td><select name="merch2" id="merch2" oninput="calPrice('2');"> 
      <option value="">Please select</option> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select></td> 
      <td><input type="number" min="0" name="quantity2" id="quantity2" onchange="multiplyQuantity('2');"></td> 
      <td><input type="text" name="price2" id="price2" disabled></td> 
      <td><input onblur="findTotal();" type="text" name="pretotal" id="total2"></td> 
      </tr> 

       <br> 

      <tr> 
      <td><select name="merch3" id="merch3" oninput="calPrice('3');"> 
      <option value="">Please select</option> 
      <option value="tshirt">T-Shirt</option> 
      <option value="longsleeve">Longsleeve</option> 
      <option value="hoodie">Hoodie</option> 
      <option value="cd">CD</option> 
      <option value="tape">Tape</option> 
      <option value="lp">LP</option> 
      </select></td> 
      <td><input type="number" min="0" name="quantity3" id="quantity3" onchange="multiplyQuantity('3');"></td> 
      <td><input type="text" name="price3" id="price3" disabled></td> 
      <td><input onblur="findTotal();" type="text" name="pretotal" id="total3"></td> 
      </tr> 

       <br> 

      <tr> 
      <td></td> 
      <td></td> 
      <td style="text-align:right"><strong>Total:</strong></td> 
      <td><input type="text" name="total" id="total" disabled></td></tr> 
      </table> 

       <br> 

      <b>Comment:</b><br><textarea rows="4" cols="50"></textarea><br> 
      <button type="submit" value="Submit">Submit</button> 
      <button type="reset" value="Reset">Reset</button> 

      </form> 

<script language="javascript" type="text/javascript"> 
function calPrice(x){ 
    var item = document.getElementById("merch"+x).value; 
    console.log(item); 
    var price; 
    switch(item){ 
      case("tshirt"): 
       price = 10; 
       break; 
      case("longsleeve"): 
       price = 20; 
       break; 
      case("hoodie"): 
       price = 26; 
       break; 
      case("cd"): 
       price = 10; 
       break; 
      case("tape"): 
       price = 7; 
       break; 
      case("lp"): 
       price = 17; 
       break; 
      default: 
       price = 0; 
       break; 
     } 
     console.log(price); 
     document.getElementById("price"+x).value = price; 

     var qty = document.getElementById("quantity"+x).value; 
     if(!qty) { 
      document.getElementById("quantity"+x).value = 1; 
     } 
     multiplyQuantity(x);  
    } 

    function multiplyQuantity(x){ 
     var price = document.getElementById("price"+x).value; 
     var qty = document.getElementById("quantity"+x).value; 

     document.getElementById("total"+x).value = price * qty; 
     findTotal(); 
    } 


    function findTotal(){   
     var arr = document.getElementsByName('pretotal'); 
     var tot=0; 
     for(var i=0;i<arr.length;i++){ 
      if(parseInt(arr[i].value)) 
       tot += parseInt(arr[i].value); 
     } 
     document.getElementById('total').value = tot; 
    } 
    </script> 

</body> 
</html>

Quelle

2017-11-22 07:25:09

Verwandte Themen

 Verwandte Themen