0

スクリプトに小さな問題があり、9 つを超える入力の合計を取得できません。

最大 9 個までは正常に機能していますが、新しい入力フィールドを追加すると機能しなくなります。

入力とボタンの分割:

<div id="valuesContainer">
<input type="text" id="value01" />
<input type="text" id="value02" />
<input type="text" id="value03" />
<input type="text" id="value04" />
<input type="text" id="value05" />
<input type="text" id="value06" />
<input type="text" id="value07" />
<input type="text" id="value08" />
<input type="text" id="value09" />

</div>
<input type="button" value="Add Value" id="addMore" onclick="addInput();" />
<input type="button" value="Calculate Total" onclick="getTotal();" />
<div id="total"></div>

新しい入力フィールドを追加する関数で合計を行う Javascript。

    <script type="text/javascript">
var max = 9;

function getValues(id){
    var result = document.getElementById(id).value;
    return (result ? result : 0);
}

function addInput(){
    max++;
    var input = '<input type="text" id="value'+ max +'" />';
    document.getElementById("valuesContainer").innerHTML += input;
}

function getTotal(){
    var sum = 0;
    for(var i=1; i <= max; i++){
        sum = sum + parseFloat(getValues("value0" + i));
    }
    document.getElementById("total").innerHTML = sum;
}
    </script>
4

3 に答える 3

8

コードで、次のインデックスの前に明示的に「value0」を追加していることに注意してください。

sum = sum + parseFloat(getValues("value0" + i));

そのコードでは、10 番目のインデックスは「value010」になります。

代わりに、インデックスが 10 未満の場合にのみ「0」を先頭に追加できます。

if (i < 10)
   sum = sum + parseFloat(getValues("value0" + i)); 
else
   sum = sum + parseFloat(getValues("value" + i));

そして、10 番目のインデックスに "value10" を使用できます。これは、おそらく最初に望んでいたものです。

より大きな数または他のケースで同様の作業を行うことができます。より一般的な解決策として、関数を使用して文字列を特定のサイズにパディングすることができます

于 2013-01-20T02:45:48.380 に答える
3

どのように名前を付けていますか？

を使用していると思いますがvalue10、getValues のコードは i を に追加しvalue0ます。を使用した場合、うまくいくと思いますvalue010。

次の値を value10 にする必要がある場合は、次の 2 つの選択肢があります。

1.) 名前value01を throughvalue09からvalue1throughに変更value9

2.) i < 10 の場合にのみ 0 を追加します。

for(var i=1; i <= max; i++){
     parseFloat(getValues("value" + ((i<10)? "0" + i : i)));
}
于 2013-01-20T02:46:28.553 に答える
3

あなたのコードは言う

getValues("value0" + i)

したがって、i > 9 の値の場合、ID「value010」などを検索します。したがって、追加の入力に次のような ID がある場合

<input type="text" id="value10" />

その場合、「value010」は「value10」と一致せず、探しているものが見つかりません。

于 2013-01-20T02:46:47.960 に答える