Javascript表发票

时间：2017-11-22 01:53:12

标签： javascript html

我很难让这个工作起来。我几乎有HTML能够显示。我是Javascript的新手，我不知道如何让它工作。特别是数量乘数，添加总列，并获得这些函数的结果以显示在元素中。请帮忙！

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

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我做了一些改变。我改变了“输入量”。改变＆＃39; onchange＆＃39;关于所有元素。还更改了变量名称。

<!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>
相关问题
最新问题