【发布时间】：2014-10-22 00:36:57
【问题描述】：
所以我的任务是创建发票。我能够做到这一点，并得到它来计算总计、税收和小计。
我现在需要做的是获取我输入到文本区域的值。
<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;'但这没有用。
任何帮助将不胜感激。
编辑：
这是我为文本区域准备的内容
好像没问题
document.getElementById('textarea').value = "--" + code + "--" + " " + " " + "--" + "--" + itemName + "--" + " " + " " + "--" + cost +"--" + " " + " " + "--" + quantity + "--" + " " + " " + "--" + subtotal + "--" + " " + " " + " " + "--" + tax + "--" + " " + " " + "--" + total + "--";
这可能不是正确的代码。
【问题讨论】：
-
调用时，
getElementById需要您感兴趣的元素的id属性。对于您的textarea元素，您有id='textarea'。为了帮助消除您的一些困惑，您为什么会相信getElementById(input='text')会起作用？ -
在返回元素对象（即
[object HTMLTextAreaElement]）时，您的尝试似乎已经完成了一半。通过调用getElementById('textarea')，您只返回包含textarea的id属性的DOM 元素。下一部分（我在您的computeCost函数中看到）将访问该 DOM 元素的value属性以检索值。 -
对相同的变量名重复
var会引发各种意想不到的问题。为什么你首先要把这一切都放在一个 textarea 中？ -
@user3577397 DOM 元素的
value属性驱动存储在该元素内部的内容。可以检索此属性，并可用于分配您希望出现在该元素中的值。这有帮助吗？我的努力是让您作为学习练习自己得出答案。 -
好的..听起来很合理。在现实世界中它没有多大意义
标签： javascript jquery html textarea invoice