reducerを使用した際にNaNが出力される原因について知りたい。

###　配列の値を合計値として出力したい。

scoreAとscoreBのそれぞれの合計値をクリックしたタイミングで出力する。

例）
scoreA = [1,2,3,4,5]だった場合、15が出力される。
scoreB = [1,1,2,1,1]だった場合、6が出力される。

NaNが出力されて値が還らない。

script.js:255 NaN

該当のソースコード

js
1//1,2,4,5,8のスコアを合計する。
2//3,6,7,9,10のスコアを引く。
3
4const radio = document.querySelectorAll('input');
5const btn = document.querySelector('button');
6const array = [];
7
8const scoreA = [];
9const scoreB = [];
10
11radio.forEach(element => {
12    element.addEventListener('click', () => {
13        const n = element.name.replace('element', '') - 1;
14        if (element.checked) {
15            array[n] = element.value;
16        }
17        console.log(array, array.length);
18    });
19});
20
21btn.addEventListener('click', (event) => {
22    event.preventDefault();
23    if (array.length !== 10) {
24        alert('error');
25    } else {
26        alert('ok');
27        calcScore();
28    }
29});
30
31function calcScore() {
32    scoreA.push(array[0], array[1], array[3], array[4], array[7]);
33    scoreB.push(array[2], array[5], array[6], array[8], array[9]);
34    const reducer = 
35    (accumulator,currentValue)=> accumulator + currentValue;
36    scoreA.reduce(reducer);
37    scoreB.reduce(reducer);
38
39    console.log(scoreA);
40    console.log(scoreB);
41};

試したこと

Array.prototype.reduce()の冒頭の項目を参照した。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2021/05/21 08:15

ご提示のコードを試してみました。 DOMの部分はHTMLがなかったので、飛ばして、calcScoreだけを試してみましたが、それぞれ15,6が得られます。つまり、問題が再現しませんでした。なお、reduce() は、非破壊的なメソッドなので、返り値を受け取らないといけません。当方では、console.log(scoreA.reduce(reducer)); などとして動作を確認しました。