Html javascript让我的文本框显示一个变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19580392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript getting my textbox to display a variable
提问by im dumb
So I have some basic code in html here, i just have two textbox which u can type numbers in and when you click the button, it adds em both up, and in a perfect world, it would display the answer in that third textbox.
所以我在这里有一些基本的 html 代码，我只有两个文本框，你可以在其中输入数字，当你点击按钮时，它会将它们加起来，在完美的世界中，它会在第三个文本框中显示答案。
<html>
<head>
</head>
<script type="text/javascript">
function myfunction()
{
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = +first + +second;
var textbox3 = answer;
}
</script>
<body>
<input type="text" name="textbox1" id="textbox1" />
+
<input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
<br />
Your answer is: --
</body>
</html>
however, i can't the the answer to display in that textbox3. Does anyone know how to assign a value to that third textbox from a variable?
但是，我无法在该 textbox3 中显示答案。有谁知道如何从变量中为第三个文本框赋值？
also, as an added bonus, if anyone knows a way to also make the last line "Your answer is: --" display the answer as well, that would be amazing.
另外，作为一个额外的好处，如果有人知道一种方法也可以使最后一行“您的答案是：-”也显示答案，那就太棒了。
回答by Vicky Gonsalves
function myfunction() {
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = parseFloat(first) + parseFloat(second);
var textbox3 = document.getElementById('textbox3');
textbox3.value = answer;
}<input type="text" name="textbox1" id="textbox1" /> + <input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<br/> Your answer is:--
<input type="text" name="textbox3" id="textbox3" readonly="true" />回答by joshden
You're on the right track with using document.getElementById()as you have done for your first two text boxes. Use something like document.getElementById("textbox3")to retrieve the element. Then you can just set its value property: document.getElementById("textbox3").value = answer;
document.getElementById()正如您对前两个文本框所做的那样，您的使用方法是正确的。使用类似的东西document.getElementById("textbox3")来检索元素。然后你可以设置它的 value 属性：document.getElementById("textbox3").value = answer;
For the "Your answer is: --", I'd recommend wrapping the "--" in a <span/>(e.g. <span id="answerDisplay">--</span>). Then use document.getElementById("answerDisplay").textContent = answer;to display it.
对于“您的答案是：--”，我建议将“--”包装在<span/>（例如<span id="answerDisplay">--</span>）中。然后使用document.getElementById("answerDisplay").textContent = answer;来显示它。
回答by Nomis
Even if this is already answered (1 year ago) you could also let the fields be calculated automatically.
即使这已经得到回答（1 年前），您也可以让字段自动计算。
The HTML
HTML
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla"/></td>
</tr>
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla."/></td>
</tr>
The script
剧本
$(document).ready(function(){
$(".class_name").each(function(){
$(this).keyup(function(){
calculateSum()
;})
;})
;}
);
function calculateSum(){
var sum=0;
$(".class_name").each(function(){
if(!isNaN(this.value) && this.value.length!=0){
sum+=parseFloat(this.value);
}
else if(isNaN(this.value)) {
alert("Maybe an alert if they type , instead of .");
}
}
);
$("#sum").html(sum.toFixed(2));
}
