用 4 个值和一个按钮求和

>我正在尝试以 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>

看起来你的 total 输入是第二种形式，所以你需要form[1]，还需要使用 total.value 来设置值：

var total = document.forms[1].tEx2;
...
total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;

现场示例：

(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[1].tEx2;
  var txt1  = aTxt[0].value;
  var txt2  = aTxt[1].value;
  var txt3  = aTxt[2].value;
  var txt4  = aTxt[3].value;
  total.value = parseInt(txt1) + parseInt(txt2) + parseInt(txt3) + parseInt(txt4) ;
  return true;
}

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

您正在更改整个实例而不是total.value。在行total = ...+...+..+...;中，您基本上是用总和替换标签。您应该改为设置标签文本：total.value = ...+..+...+...;

相关内容

最新更新

热门标签：