Question

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

然而，我不能在该文本框3中显示答案。有谁知道如何从变量中为第三个文本框分配值？

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

Answer 1

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

Answer 2

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

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

Answer 3

即使已经回答（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));
                }

javascript让我的文本框显示变量

3 个答案: