Question

我有这个JavaScript代码，可以在表单输入时动态添加值。但是，我在想要做的事情上苦苦挣扎。

我在测验中有4个问题，每个问题都有4个答案。

我想为每个问题添加4个答案框中的每一个的值。但我无法解决如何在页面上多次使用此脚本的问题。有人可以提出建议吗？

＆＃13;

    <html>
    <head>
        <script type="text/javascript">
        function updatesum1() {
            document.form.sum.value = (document.form.sum1.value - 0)
                                    + (document.form.sum2.value - 0)
                                    + (document.form.sum3.value - 0)
                                    + (document.form.sum4.value - 0);
        }
        </script>
    </head>
    <body>
        <form name="form" >
            Enter a number:
            <input name="sum1" onChange="updatesum1()" />
            and another number:
            <input name="sum2" onChange="updatesum1()" />
            and another number:
            <input name="sum3" onChange="updatesum1()" />
            and another number:
            <input name="sum4" onChange="updatesum1()" />
            Their sum is:
            <input name="sum" readonly style="border:0px;">
        </form>
    </body>
    </html>

＆＃13;

Answer 1

将表单作为参数传递给函数，而不是在函数中对其进行硬编码。在输入元素中，this.form指的是包含它的表单。

＆＃13;

function updatesum1(form) {
  form.sum.value = (form.sum1.value - 0) +
    (form.sum2.value - 0) +
    (form.sum3.value - 0) +
    (form.sum4.value - 0);
}

＆＃13;

<form name="form">
  Enter a number:
  <input name="sum1" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum2" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum3" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum4" onChange="updatesum1(this.form)" /> <br>
  Their sum is:
  <input name="sum" readonly style="border:0px;">
</form>
<p>
<form name="form">
  Enter a number:
  <input name="sum1" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum2" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum3" onChange="updatesum1(this.form)" /> <br>
  and another number:
  <input name="sum4" onChange="updatesum1(this.form)" /> <br>
  Their sum is:
  <input name="sum" readonly style="border:0px;">
</form>

＆＃13;

Answer 2

这不是我怎么做的，但是它会改变你想要的“总和”。

如果你能够使用jQuery我会走这条路。

    <script type="text/javascript">
        $(document).ready(function () {

            $(".addInput").on("change", function () {//jQuery's on event handles all inputs

                updateSum();//call the function
            });

            function updateSum() {//This function could be made more generic.

               var sum1 = parseInt($("#sum1").val());
               var sum2 = parseInt($("#sum2").val());
               var sum3 = parseInt($("#sum3").val());
               var sum4 = parseInt($("#sum4").val());

               if(isNaN(sum1)){//make sure the input contains a parsable number.
                   sum1 = 0;
               }
               if(isNaN(sum2)){
                   sum2 = 0;
               }
               if(isNaN(sum3)){
                   sum3 = 0;
               }
               if(isNaN(sum4)){
                   sum4 = 0;
               }

               var sum = sum1 + sum2 + sum3 + sum4;//add everything up


                $("#sum").val(sum);//add it to te sum input
            }
        });

        //function updatesum1() {
        //    document.form.sum.value = (document.form.sum1.value - 0)
        //                            + (document.form.sum2.value - 0)
        //                            + (document.form.sum3.value - 0)
        //                            + (document.form.sum4.value - 0);
        //}
    </script>
    <title>Input Adding</title>
</head>
<body>
    <form name="form" >
        Enter a number:
        <input name="sum1" class="addInput" id="sum1" value/>
        and another number:
        <input name="sum2" class="addInput" id="sum2" value/>
        and another number:
        <input name="sum3" class="addInput" id="sum3" value/>
        and another number:
        <input name="sum4" class="addInput" id="sum4" value/>
        Their sum is:
        <input name="sum" id="sum" readonly style="border:0px;">
    </form>       

</body>

希望这有助于

动态添加表单值

2 个答案: