1. ホーム
  2. 質問と答え
  3. Javascript Table Invoice

Javascript Table Invoice

2017-11-22 3 views
0

私はこれを動作させるのに苦労しています。私はかなりHTMLを表示することができます。私はJavascriptを初めて使いました。私はそれを動作させる方法がわかりません。具体的には、量の乗数、合計の列を追加し、これらの関数の結果を要素に表示することです。助けてください！Javascript Table Invoice

<!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>

出典

2017-11-22 adjr90

答えて

0

あなたのコード（一致していない変数と関数の命名）におけるいくつかのバグがあり、あなたが今やっている、次に何これを行うにはもっと良い方法がありますが、問題を複雑にしないためにもっと私はバグを修正しました。ここで

は、作業のコードは次のとおりです。

<!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>

出典

2017-11-22 07:02:47 HMR

0

私はいくつかの変更を加えました。私はすべての要素のoninputをonchangeに変更しました。変数名も変更されました。

<!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>

出典

2017-11-22 07:25:09

関連する問題

 関連する問題