3

所以我在这里有一些基本的 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>

但是，我无法在该 textbox3 中显示答案。有谁知道如何从变量中为第三个文本框赋值？

另外，作为一个额外的好处，如果有人知道一种方法也可以使最后一行“您的答案是：--”也显示答案，那将是惊人的。

4

3 回答 3

12 

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

于 2013-10-25T03:36:38.397 回答
2

document.getElementById()就像您对前两个文本框所做的那样，您在正确的轨道上使用。使用类似的东西document.getElementById("textbox3")来检索元素。然后你可以设置它的 value 属性：document.getElementById("textbox3").value = answer;

对于“您的答案是：--”，我建议将“--”包装在<span/>（例如<span id="answerDisplay">--</span>）中。然后用document.getElementById("answerDisplay").textContent = answer;它来显示它。

于 2013-10-25T03:38:29.820 回答
0

即使这已经回答（1 年前），您也可以让这些字段自动计算。

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

剧本

$(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));
                }
于 2015-02-09T11:36:24.283 回答