javascript - 関数に合計が表示されない

Question

配列から合計を返そうとしていますが、何らかの理由で表示されません。いろいろ試してみたのですが、なぜか配列の合計が返ってこないのです。コンソールから呼び出すtableSum(sum)と返されますが、JavaScript では発生していません。

これが私のコードです：

var tableSum = function () {
    'use strict';
    var sum = 0,
        i;
    for (i = 0; i < numberArray.length; i += 1) {
        sum += numberArray[i];
    }
    return sum;
    document.getElementById('sum').innerHTML = sum;
};

HTML:

<table border="1">
    <tr>
        <td style = "text-align:right;">Sum:</td>
        <td style="width:100px" id = "sum">&#160;</td>
    </tr>

Answer 1

returnステートメントは関数を終了し、結果をDOM要素に割り当てようとするその下の行の実行を防ぎます。Mozillaのドキュメントから：

関数は、returnが呼び出された時点ですぐに停止します。

代わりに次を試してください。

var tableSum = function () {
    'use strict';
    var sum = 0, i;
    for (i = 0; i < numberArray.length; i += 1) {
        sum += numberArray[i];  
    }

    return sum;
};

document.getElementById('sum').innerHTML = tableSum();

関数からレンダリングを分離すると、レンダリングがより柔軟で再利用可能になり、同じ関数を使用して、たとえば他のDOM要素を更新できるようになります。

Answer 2

DOMを更新する前に関数から戻っているようです。

returnステートメントをDOM操作の後に移動してみてください。

document.getElementById('sum').innerHTML = sum;
return sum;