如何在一個文本區域中添加3個不同值的總和

我爲每個表單應用了我的每個收音機的值。要點是，我需要將它們的總和設置在一起。我想我可以簡單地去設置一個簡單的函數，爲每個表單的每個文本區域的值設置一個附加的功能，這樣總數就會顯示出來，但看起來好像不起作用。我只是覺得我錯過了一些東西。這是我的代碼，謝謝！：如何在一個文本區域中添加3個不同值的總和

的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) ; 
}

以防萬一，這裏是我的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>

來源

2016-03-17 user6074580

您可以通過添加一個onclick屬性輸入按鈕調用函數時解決它該按鈕被點擊：

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

還修改了名稱從功能sommeButton（）函數{到功能sommButton（）{

並修改代碼中獲得的值：

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

在得到的值，我把它做成一襯墊if語句在輸入標記中沒有值時返回0。

我希望這有助於！

來源

2016-03-17 02:18:10

謝謝你ou我找到了解決問題的方法。你是一個拯救生命的人，謝謝！ – user6074580

您還可以通過document.querySelector（'input [name =「tEx1」]'）獲取值。這是一種更簡單的方法，因爲您不會使用document.forms 不客氣！：d –

您可能需要一個js函數來處理事件和進行更新

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); 
}); 
})()

會爲你做它

來源

2016-03-17 03:05:59

如何在一個文本區域中添加3個不同值的總和

回答

相關問題