web-dev-qa-db-ja.com

テキストボックスに変数を表示させるjavascript

だから私はここにhtmlのいくつかの基本的なコードを持っています、私はあなたが数字を入力できる2つのテキストボックスを持っています、そしてあなたがボタンをクリックすると、それは両方を追加します、そして完璧な世界では、それはその3番目のテキストボックスに答えを表示します。

<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。変数からその3番目のテキストボックスに値を割り当てる方法を知っている人はいますか？

また、追加のボーナスとして、「あなたの答えは：-」という最後の行も表示する方法を誰かが知っているなら、それは素晴らしいことです。

javascripthtmltextbox
2
im dumb
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" />
8
Vicky Gonsalves

最初の2つのテキストボックスで行ったように、document.getElementById()を使用することで正しい方向に進んでいます。 document.getElementById("textbox3")のようなものを使用して要素を取得します。次に、その値プロパティを設定できます：document.getElementById("textbox3").value = answer;

「あなたの答えは：-」の場合、「-」を_<span/>_で囲むことをお勧めします（例：_<span id="answerDisplay">--</span>_）。次に、document.getElementById("answerDisplay").textContent = answer;を使用して表示します。

2
joshden

これがすでに回答されている場合でも（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));
                }
0
Nomis