Come ottenere la somma di 3 valori diversi in un'area di testo

Applicai valore a ciascuna radio, per ciascuna delle mie forme. Il punto è che ho bisogno di impostare la somma di tutti insieme. Ho pensato che potevo semplicemente andare e impostare semplicemente la funzione di impostare il valore di ciascuna area di testo per ogni modulo in un'aggiunta nella mia funzione in modo che il totale sarebbe mostrato, ma sembra che non funzioni. Mi sento come se mi mancasse qualcosa. Ecco i miei codici, grazie! :Come ottenere la somma di 3 valori diversi in un'area di testo

Java:

(function(){ 

var oForm = document.forms; 

oForm[0].querySelector("input[type='radio']").addEventListener("click",sommButton,false); 

})() 

function sommeButton() { 

var aSomme1 = document.forms[0].tEx1; 
var aSomme2 = document.forms[1].tEx2; 
var aSomme3 = document.forms[2].tEx3; 
var total = document.forms[3].tEx4; 
var somme1 = aSomme1[5].value; 
var somme2 = aSomme2[5].value; 
var somme3 = aSomme3[5].value; 

total.value = parseInt(somme1) + parseInt(somme2) + parseInt(somme3) ; 
}

Solo nel caso, ecco la mia html:

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Exercise 5</title> 
<link rel="stylesheet" href="css/form.css" /> 
</head> 
<body> 
       <section> 
      <form name="frm1"> 
       <label> 
        <input type="radio" value="10" name="r1" 
         onClick="tEx1.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r1" 
         onClick="tEx1.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r1" 
         onClick="tEx1.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r1" 
         onClick="tEx1.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" 
        <input type="radio" value="30" name="r1" 
         onClick="tEx1.value = this.value"/> 
       </label> 

       <label> 
        <input type="text" name="tEx1" /> 
       </label> 
      </form> 
     </section> 

     <section> 
      <form name="frm2"> 
       <label> 
        <input type="radio" value="10" name="r2" 
         onClick="tEx2.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r2" 
         onClick="tEx2.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r2" 
         onClick="tEx2.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r2" 
         onClick="tEx2.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="30" name="r2" 
         onClick="tEx2.value = this.value"/> 
       </label> 

       <label> 
        <input type="text" name="tEx2" /> 
       </label> 
      </form> 
     </section> 

     <section> 
      <form name="frm3"> 
       <label> 
        <input type="radio" value="10" name="r3" 
         onClick="tEx3.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r3" 
         onClick="tEx3.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r3" 
         onClick="tEx3.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r3" 
         onClick="tEx3.value = this.value"/> 
       </label> 

       <label> 
        <input type="radio" value="30" name="r3" 
         onClick="tEx3.value = this.value"/> 
       </label> 

       <label> 
        <input type="text" name="tEx3" /> 
       </label> 
      </form> 
     </section> 

     <section> 
       <label> 
        <input type="button" value="Somme" name="btn1"> 
       </label> 
     </section> 

     <section> 
       <form name="frm4"> 
       <label> 
        <input type="text" name="tEx4" /> 
       </label> 
       </form> 
     </section> 

</body> 
<script src="js/exercise5.js"></script> 
</html>

fonte

2016-03-17 user6074580

si può risolvere con l'aggiunta di un attributo onclick al pulsante input per chiamare la funzione quando viene fatto clic sul pulsante:

<label> 
    <input type="button" value="Somme" name="btn1" onclick="sommButton()"> 
</label>

Modificare anche il nome del funzione dalla funzione sommeButton() { a funzione sommButton() {

e modificare il codice a ottenere i valori:

var somme1 = ((aSomme1.value !='')?aSomme1.value:'0'); 
var somme2 = ((aSomme2.value !='')?aSomme2.value:'0'); 
var somme3 = ((aSomme3.value !='')?aSomme3.value:'0');

Nell'ottenere i valori, feci in una battuta if-statement che restituisce 0 quando non c'è alcun valore nel tuo tag di input.

Spero che questo aiuti!

fonte

2016-03-17 02:18:10

Grazie ou Ho trovato un modo, con la tua soluzione, per risolvere il problema. Sei un risparmiatore di vita, grazie! – user6074580

Puoi anche ottenere valori per documento.querySelector ('input [nome = "tEx1"]'). Valore che è un modo più semplice perché non utilizzerai document.forms Prego! : D –

Si consiglia una funzione js per gestire l'evento e gli aggiornamenti make

https://jsfiddle.net/devilfox/huasn28d/

<body> 
       <section> 
      <form name="frm1"> 
       <label> 
        <input type="radio" value="10" name="r1" 
         onClick="onChange(tEx1,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r1" 
         onClick="onChange(tEx1,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r1" 
         onClick="onChange(tEx1,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r1" 
         onClick="onChange(tEx1,this.value)"/> 
       </label> 

       <label> 
          <input type="radio" value="30" name="r1" 
         onClick="onChange(tEx1,this.value)"/> 
       </label> 

       <label> 
        <input class="disp" type="text" name="tEx1" /> 
       </label> 
      </form> 
     </section> 

     <section> 
      <form name="frm2"> 
       <label> 
        <input type="radio" value="10" name="r2" 
         onClick="onChange(tEx2,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r2" 
         onClick="onChange(tEx2,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r2" 
         onClick="onChange(tEx2,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r2" 
         onClick="onChange(tEx2,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="30" name="r2" 
         onClick="onChange(tEx2,this.value)"/> 
       </label> 

       <label> 
        <input class="disp" type="text" name="tEx2" /> 
       </label> 
      </form> 
     </section> 

     <section> 
      <form name="frm3"> 
       <label> 
        <input type="radio" value="10" name="r3" 
         onClick="onChange(tEx3,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="15" name="r3" 
         onClick="onChange(tEx3,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="20" name="r3" 
         onClick="onChange(tEx3,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="25" name="r3" 
         onClick="onChange(tEx3,this.value)"/> 
       </label> 

       <label> 
        <input type="radio" value="30" name="r3" 
         onClick="onChange(tEx3,this.value)"/> 
       </label> 

       <label> 
        <input class="disp" type="text" name="tEx3" /> 
       </label> 
      </form> 
     </section> 

     <section> 
       <label> 
        <input type="button" value="Sum" name="btn1"> 
       </label> 
     </section> 

     <section> 
       <form name="frm4"> 
       <label> 
        <input type="text" name="tEx4" /> 
       </label> 
       </form> 
     </section> 
<script> 
function onChange(element,val){ 
    element.value = val; 
    $(".disp").trigger("change"); 
    }; 
    var num = function(t){ 
    return ((!isNaN(t))&&t!='')?Number(t):0; 
    }; 
</script> 
</body>

(function(){ 

    $(".disp").on('change',function() { 

     var total = num($('[name="tEx1"]').val())+ 
    num($('[name="tEx2"]').val())+ 
    num($('[name="tEx3"]').val());   
    $('[name="tEx4"]').val(total); 
}); 
})()

lo farà per voi

fonte

2016-03-17 03:05:59

Come ottenere la somma di 3 valori diversi in un'area di testo

risposta

Problemi correlati