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 + "--";
它可能不是正確的代碼壽。
當調用'getElementById'時,它期望您感興趣的元素的id屬性。對於'textarea'元素,您有'id ='textarea''。爲了幫助理清你的一些疑惑,你爲什麼會認爲'getElementById(input ='text')'會起作用? – 2014-10-22 00:39:53
不確定。因爲每一個輸入值都是「text」,所以我可以調用所有名爲「text」的輸入值。那麼當我這樣做時,我輸入的所有內容都將被轉移到文本區域。現在我看了一下,那裏沒有字跡,這讓它進入了文本區域。我有一堆我嘗試過的東西,但被刪除了。那只是我的頭頂。有一次我嘗試了一些東西(不記得它是什麼),但我在文本區域中獲得了'[object HTMLTextAreaElement]',但沒有輸入我輸入的值。 – user3577397 2014-10-22 00:45:25
這似乎是你返回元素對象時的嘗試(即'[object HTMLTextAreaElement]')你在那裏的一半。通過調用'getElementById('textarea')'你只返回包含'textarea'的'id'屬性的DOM元素。下一部分(我在'computeCost'函數中看到)將訪問該DOM元素的'value'屬性以檢索該值。 – 2014-10-22 00:49:02