Javascript 用4个值和一个按钮求和_Javascript_Html

Javascript 用4个值和一个按钮求和

javascript html

Javascript 用4个值和一个按钮求和,javascript,html,Javascript,Html,我试图在4个文本类型中对4个条目进行求和，但当我单击按钮时，它不会设置求和。就像我在每个文本输入中输入1一样，总和的文本输入应该显示4。谢谢以下是我的Javascript代码： (function(){ var oForm = document.forms; oForm[2].querySelector("input[type='button']"). addEventListener("click",

我试图在4个文本类型中对4个条目进行求和，但当我单击按钮时，它不会设置求和。就像我在每个文本输入中输入1一样，总和的文本输入应该显示4。谢谢

以下是我的Javascript代码：

(function(){
var oForm = document.forms;

oForm[2].querySelector("input[type='button']").
                                        addEventListener("click",
                                            sommeValeur,
                                            false);
}) ()

function sommeValeur() {

  var aTxt = document.forms[0].tEx1;
  var total = document.forms[0].tEx2;
var txt1  = aTxt[0].value;
var txt2  = aTxt[1].value;
var txt3  = aTxt[2].value;
var txt4  = aTxt[3].value;

total = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

return true;
}

以下是我的html代码：

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/form.css" />
</head>
<body>
<section>
            <form name="frm1">
                <label> Valeur 1:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 2:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 3:
                    <input type="text" name="tEx1" />
                </label>
                <label> Valeur 4:
                    <input type="text" name="tEx1" />
                </label>
            </form>
        </section>

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

        <section>
                <form name="frm3">
                <label>
                    <input type="button" 
                    value="bouton" 
                    name="btn1" /></br>
                </label>
                </form>
        </section>
</body>
<script src="js/exercise4.js"></script> 
</html>


文件
瓦勒尔1：
瓦勒尔2：
瓦勒尔3：
瓦勒尔4：
索姆：

您正在更改的是total实例，而不是

total.value

。

在

total=…+…+…+…+行中基本上是用总和替换标签。您应该改为设置标签文本：total.value=…++
您正在更改的是total实例，而不是total.value。
在total=…+…+…+…+行中基本上是用总和替换标签。您应该改为设置标签文本：total.value=…++
看起来您对总计的输入是第二种形式，因此您需要形式[1]
，并且您还需要使用total.value
来设置值：
var total = document.forms[1].tEx2;
...
total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

实例：

（函数（）{
形式变量=document.forms；
表单[2]。查询选择器（“输入[type='button']”）。
addEventListener（“单击”，
索姆瓦勒，
假）；
}) ()
函数sommevalur（）{
var aTxt=document.forms[0].tEx1；
var total=document.forms[1].tEx2；
var txt1=aTxt[0]。值；
var txt2=aTxt[1]。值；
var txt3=aTxt[2]。值；
var txt4=aTxt[3]。值；
total.value=parseInt（txt1）+parseInt（txt2）+parseInt（txt3）+parseInt（txt4）；
返回true；
}

文件
瓦勒尔1：
瓦勒尔2：
瓦勒尔3：
瓦勒尔4：
索姆：


看起来您对总计的输入是第二种形式，因此您需要形式[1]
，并且您还需要使用total.value
来设置值：
var total = document.forms[1].tEx2;
...
total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

实例：

（函数（）{
形式变量=document.forms；
表单[2]。查询选择器（“输入[type='button']”）。
addEventListener（“单击”，
索姆瓦勒，
假）；
}) ()
函数sommevalur（）{
var aTxt=document.forms[0].tEx1；
var total=document.forms[1].tEx2；
var txt1=aTxt[0]。值；
var txt2=aTxt[1]。值；
var txt3=aTxt[2]。值；
var txt4=aTxt[3]。值；
total.value=parseInt（txt1）+parseInt（txt2）+parseInt（txt3）+parseInt（txt4）；
返回true；
}

文件
瓦勒尔1：
瓦勒尔2：
瓦勒尔3：
瓦勒尔4：
索姆：


因为您正在以不正确的形式搜索文本框，所以它应该是forms[1].tEx2
。无论如何，我建议您使用jQuery并为元素指定一些类，因为您正在以错误的形式搜索文本框，它应该是forms[1].tEx2
。无论如何，我建议您使用jQuery并为elements@DraynaFlaire我很高兴这有帮助；）把答案标记为“被接受”，这样别人就会知道解决办法。把答案标记为“被接受”，这样别人就会知道解决方法。