JavaScript 让我的文本框显示一个变量

javascript getting my textbox to display a variable

本文关键字：一个 变量 显示 我的 文本 JavaScript      更新时间：2023-09-26

所以我这里有一些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。有谁知道如何从变量为第三个文本框赋值？

此外，作为额外的奖励，如果有人知道一种方法也可以使最后一行"您的答案是：--"也显示答案，那将是惊人的。

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

您使用document.getElementById()就像对前两个文本框所做的那样。使用类似 document.getElementById("textbox3") 的内容来检索元素。然后你可以设置它的值属性：document.getElementById("textbox3").value = answer;

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

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

该目录 

    <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));
                }
相关文章：