web-dev-qa-db-fra.com

javascript obtenir ma zone de texte pour afficher une variable

Donc, j'ai un code de base en html ici, j'ai juste deux zones de texte dans lesquelles vous pouvez taper des nombres et lorsque vous cliquez sur le bouton, cela les ajoute, et dans un monde parfait, la réponse apparaît dans cette troisième zone de texte.

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

cependant, je ne peux pas la réponse à afficher dans cette zone de texte3. Est-ce que quelqu'un sait comment attribuer une valeur à cette troisième zone de texte à partir d'une variable?

aussi, en prime, si quelqu'un connaît un moyen de faire aussi la dernière ligne "Votre réponse est: -" affichez également la réponse, ce serait génial.

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

Vous êtes sur la bonne voie en utilisant document.getElementById() comme vous l'avez fait pour vos deux premières zones de texte. Utilisez quelque chose comme document.getElementById("textbox3") pour récupérer l'élément. Ensuite, vous pouvez simplement définir sa propriété value: document.getElementById("textbox3").value = answer;

Pour le "Votre réponse est: -", je vous conseillerais de placer le "-" dans un <span/> (par exemple, <span id="answerDisplay">--</span>). Utilisez ensuite document.getElementById("answerDisplay").textContent = answer; pour l’afficher.

2
joshden

Même si cela a déjà été répondu (il y a 1 an), vous pouvez également laisser les champs être calculés automatiquement.

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

Le scénario 

$(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