2014-10-22 45 views
0

因此我負責創建發票。我能夠做到這一點,並得到它來計算總額,稅收和小計。Javascript - 將計算值計入發票的文本區域

我現在需要做的是獲取我輸入到文本區域的值。

<textarea input type ="text" name = "textarea" id = "textarea" rows = "12" cols = "180"></textarea> 

我會把我到目前爲止的代碼放在下面。它計算,但我希望我的輸入值進入我在「當前發票」下創建的大文本區域。

喜歡的東西(下面的內容將在文本區域去)

---Item Code---    ---Item Name-----  ----Item Cost----  ----Quantity----  
    (user input)     (user input)    user input    user input 

--- Subtotal----    ---tax-------  ----Total------ 
    (calculation)    (calculation)   (calculation) 

我會告訴你我的代碼

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


     <h1>Invoice Manager</h1> 

     <style type "text/css"> 
     div  {position: absolute; 
        top: 200px; 
        left: 90px; 
        z-index: 1;} 
     l   
     </style> 
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 

     <script type = "text/javascript"> 


     function computeCost(){ 
      var code = document.getElementById("code").value; 
      var code = code; // item code 

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

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

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

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

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

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

      var textContent = document.getElementById("textarea").value; 





      document.getElementById("subtotal").value = subtotal; 

      document.getElementById("tax").value = tax; 

      document.getElementById("total").value = total; 

      document.getElementById("textContent").value = textContent; 


     } 


     </script> 



    <body> 

    <form action = ""method = "post" name = "myForm"> 
     <table> 

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

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

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

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

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

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

    <textarea input type ="text" name = "textarea" id = "textarea" rows = "12" cols = "180"></textarea> 
    </label> 




      <table> 

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

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

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

      </table> 
    </form> 




     <form> 
     <div id="AddItemButton"> 
      <td align = "left"><input type="button" value= "Add Item" id = "add" onclick="computeCost();"/> 
      <td> 
     </div> 
     </form> 




</body> 
</html> 

任何想法?我正努力在文本區域中輸入我的輸入值。

我試着調用'getElementById(input ='text')。value;'但那並不奏效。

任何幫助,將不勝感激。

編輯:

下面是我對textarea的

似乎工作確定

document.getElementById('textarea').value = "--" + code + "--" + " " + " " + "--" + "--" + itemName + "--" + " " + " " + "--" + cost +"--" + " " + " " + "--" + quantity + "--" + " " + " " + "--" + subtotal + "--" + " " + " " + " " + "--" + tax + "--" + " " + " " + "--" + total + "--"; 

它可能不是正確的代碼壽。

+3

當調用'getElementById'時,它期望您感興趣的元素的id屬性。對於'textarea'元素,您有'id ='textarea''。爲了幫助理清你的一些疑惑,你爲什麼會認爲'getElementById(input ='text')'會起作用? – 2014-10-22 00:39:53

+0

不確定。因爲每一個輸入值都是「text」,所以我可以調用所有名爲「text」的輸入值。那麼當我這樣做時,我輸入的所有內容都將被轉移到文本區域。現在我看了一下,那裏沒有字跡,這讓它進入了文本區域。我有一堆我嘗試過的東西,但被刪除了。那只是我的頭頂。有一次我嘗試了一些東西(不記得它是什麼),但我在文本區域中獲得了'[object HTMLTextAreaElement]',但沒有輸入我輸入的值。 – user3577397 2014-10-22 00:45:25

+1

這似乎是你返回元素對象時的嘗試(即'[object HTMLTextAreaElement]')你在那裏的一半。通過調用'getElementById('textarea')'你只返回包含'textarea'的'id'屬性的DOM元素。下一部分(我在'computeCost'函數中看到)將訪問該DOM元素的'value'屬性以檢索該值。 – 2014-10-22 00:49:02

回答

1

如果你想在textarea的一些格式,你可以使用TINYMCE

可以追加你的textarea的HTML元素。

+0

我會試試這個謝謝。這只是一個猜測,但我的textarea看起來像「