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

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

javascript html css

Javascript HTML-发票：如何向文本字段中添加值并计算总额,javascript,html,css,invoice,invoices,Javascript,Html,Css,Invoice,Invoices,我能够创建模板，但我不确定从这里做什么当我单击“添加项目”按钮时，我希望这些值进入我在底部创建的文本区域，并在我不断添加项目时更改小计和总计 <html> <head> <meta charset = "utf-8"> <h1>Invoice Manager</h1> <style type "text/css"> div {posit

我能够创建模板，但我不确定从这里做什么

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

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

我能做些什么？我不知所措

谢谢

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

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


函数computeCost（）{
var代码=document.getElementById（“代码”）.value；
var a=code；//项目代码
var itemName=document.getElementById（“itemName”）.value；
var b=itemName；//项名称
var成本=document.getElementById（“成本”）.value；
var c=成本；//计算成本
var数量=document.getElementById（“数量”）.value；
var d=数量；//计算项目数量
var小计=document.getElementById（“小计”）.value；
var e=c*d；//成本乘以数量=小计
var tax=document.getElementById（“tax”）.value；
var f=e*.7；//小计乘以税款（.7）=所欠税款金额
var total=document.getElementById（“total”）.value；
var g=f+e；//小计加税=总价值
document.getElementByID（“yo”）.value=总计；
}
函数clear（）
{
getElementById（“a”、“b”、“c”、“d”、“e”、“f”、“g”）.reset（）；
}//清除结束

我没有太多时间给出一个精巧的脚本，但它提供了基本的功能编辑：添加脚本标记和基本JQUERY内容请注意，由于从internet加载JQUERY，它在没有internet连接的情况下无法工作，如果您希望在没有internet con的情况下使用它，请下载脚本并在本地链接它

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


$（函数（）{
var textContent=$（'textarea'）.val（）；
var textRow=“”；
$（'input[type=submit]'）。单击（函数（）{
$（'input[type=text]'）。每个（函数（）{
textRow=textRow+$（this）.val（）+'\t'；
});
textContent=textContent+'\n'+textRow；
textRow=“”；
$（'textarea'）.val（textContent）；
});  
});

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

function id（id）{return document.getElementById（id）；}
var val1=0；
var-val2=0；
函数val（）{
val1=parseInt（id（“t1”）.值）；
val2=parseInt（id（“t2”）.值）；
id（“总计”）.innerHTML=（（val1>0&&val2>0））？val1*val2:0；
}

你看过这篇关于css技巧的文章吗？是的，我简单地看到了，但我的发票需要与我创建的发票布局相似。我认为它需要完全由用户生成。谢谢。我想我可以用这个。我尝试将其添加为我的脚本，但无法使其将值添加到下面的文本区域。我看到您将“textarea”分配给您创建的“textContent”。我的代码底部有一个表单，上面写着“onclick=”textarea“。这应该会将from TextContent带到textarea，对吗？如果我编辑代码并将其放在上面，你能帮我吗？”？我觉得我快接近了，但我无法让我的计算值进入下面的文本字段。这实际上应该可以自己工作。但您需要加载jquery并将其放入适当的函数中。给我一分钟，我会更新帖子。我想我没有合适的函数，因为我无法让它工作。我应该使用document.write来获取表中的值吗？我试图在document.write中获取大块代码，但由于某些原因，我无法这样做

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