Question

我能够创建模板，但我不知道该怎么做。

当我点击我的添加项目按钮时，我希望值进入我在底部创建的文本区域，并在我不断添加项目时更改小计和总计。

<html>
    <head>
        <meta charset = "utf-8">


        <h1>Invoice Manager</h1>

        <style type "text/css">
        div      {position: absolute;
                  top: 200px;
                  left: 90px;
                  z-index: 1;}
        </style>

        <script type = "text/javascript">

        </script>


    </head>

    <body>

        <table>

            <tr>
              <td align="right">Item Code:</td>
              <td align="left"><input type="text" name="code" /></td>
            </tr>

            <tr>
              <td align="right">Item Name:</td>
              <td align="left"><input type="text" name="itemName" /></td>
            </tr>

            <tr>
              <td align="right">Item Cost:</td>
              <td align="left"><input type="text" name="cost" /></td>
            </tr>

            <tr>
              <td align="right">Quantity:</td>
              <td align="left"><input type="text" name="quantity" /></td>
            </tr>
          </table>

          <div id="AddItemButton">
            <td align = "left"><input type="submit" name="Submit" value="Add Item"></td>
          </div>

        </form>

     <br></br> <br></br>
    <font size = "5">Current Invoice</font>

    <hr style = "height:2px;border:none;color:#333;background-color:#333;"></hr>

    <p><label> <br>
            <textarea name = "textarea"
                rows = "12" cols = "180"></textarea>
            </label></p>    

    <form>
            <table>

            <tr>
              <td align="right">Subtotal:</td>
              <td align="left"><input type="text" name="subtotal" /></td>
            </tr>

            <tr>
              <td align="right">Sales Tax:</td>
              <td align="left"><input type="text" name="tax" /></td>
            </tr>

            <tr>
              <td align="right">Total:</td>
              <td align="left"><input type="text" name="total" /></td>
            </tr>

          </table>
    </form>


    <form>      
        <input type = "button" value = "Add Item" onclick="textarea"/> <input type = "text" id = "cost" size ="20" />
    </form>

这就是我作为模板所拥有的。当我在这些字段中输入项目代码，项目名称，项目成本和数量时，我希望这些值位于底部的文本区域中。我想我需要在剧本中写一些东西。

我不知道如何实现这一目标，但我认为用户添加的第一批信息可能等于a等变量

然后输入的第二个值可能等于b

因此，假设用户添加了3个项目。

总=（a + b + c）

或类似的东西。

这是一个“添加项目”的例子。我希望这些提交内容出现在我创建的文本字段中

---Item Code---         ---Item Name---      ---Item Cost---       ---Quantity---

     3                        Dell              499                  1

关于我能做什么的任何想法？我不知所措。

由于

编辑：我正在添加我的脚本，我想知道它是否有问题

<script type = "text/javascript">
        function computeCost(){
            var code = document.getElementById("code").value;
            var a = code; // item code

            var itemName = document.getElementById("itemName").value;
            var b = itemName; // item name

            var cost = document.getElementById("cost").value;
            var c = cost; // calculate cost 

            var quantity = document.getElementById("quantity").value;
            var d = quantity; // calculate quantity of items

            var subtotal = document.getElementById("subtotal").value;
            var e = c * d; // multiplying cost by quantity = subtotal

            var tax = document.getElementById("tax").value;
            var f = e * .7; // multiplying subtotal by tax(.7) = amount of tax owed

            var total = document.getElementById("total").value;
            var g = f + e; //adding tax to subtotal = total value

            document.getElementByID("yo").value = total;



        }

        function clear()
            {
        document.getElementById("a","b","c","d", "e", "f", "g").reset();
            } // end of clear

        </script>

Answer 1

我没有太多时间来提供精美的脚本，但这提供了基本的功能编辑：添加脚本标签和基本的JQUERY东西请注意，由于从互联网上加载JQUERY，如果你想在没有互联网连接的情况下使用它，它将无法正常工作，下载脚本并在本地链接

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type = "text/javascript">
          $(function(){
  var textContent = $('textarea').val();
    var textRow = "";
    $('input[type=submit]').click(function(){
      $('input[type=text]').each(function(){
        textRow = textRow+$(this).val()+'\t';
      });
      textContent = textContent + '\n' + textRow;
      textRow = "";
      $('textarea').val(textContent);

    });  
});  
        </script>

Answer 2

这只是必要的JS和HTML，没什么特别的：

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
function val(){
  val1 = parseInt(id("t1").value);
  val2 = parseInt(id("t2").value);
  id("total").innerHTML = ((val1 > 0 && val2 > 0))? val1 * val2 : 0;
}

<input id="t1" onkeyup="val()" type="number">
<input id="t2" onkeyup="val()" type="number">
<h1 id="total"></h1>

HTML - 发票：如何向文本字段添加值并计算总计

2 个答案: