undefinedが表示される原因を特定したい。

数値を出力したい。

計算の結果を出力する。

数値の代わりにundefinedが出力されてしまう。

document.getElementById('text').innerHTML = result;がundefinedになる。

該当のソースコード

html
1<p id="text"></p>
2

js
1const radio = document.querySelectorAll('input');
2const btn = document.querySelector('button');
3const form = document.querySelector('form');
4const array = [];
5
6const one = document.getElementById('one');
7
8let result;
9
10radio.forEach(el => {
11    el.addEventListener('click', () => {
12        const n = el.name.replace('element', '') - 1;
13        if (el.checked) {
14            array[n] = Number(el.value);
15        }
16    });
17});
18
19btn.addEventListener('click', (event) => {
20    event.preventDefault();
21    if (array.length === 10) {
22        alert('ok');
23        document.getElementById('text').innerHTML = result;
24    } else {
25        alert('全て選択してください');
26    }
27});
28
29function calcFn() {
30    let scoreA = array.filter((_, x) => [0, 1, 3, 4, 7].includes(x));
31    let scoreB = array.filter((_, x) => [2, 5, 6, 8, 9].includes(x));
32
33    const reducer = (accumulator, currentValue) => accumulator + currentValue;
34    let arrayA = scoreA.reduce(reducer);
35    let arrayB = scoreB.reduce(reducer);
36
37    let result = scoreA - scoreB;
38    return result;
39};

###試したこと

html
1//パターン1
2function calcFn() { let scoreA = array.filter((_, x) => [0, 1, 3, 4, 7].includes(x)); let scoreB = array.filter((_, x) => [2, 5, 6, 8, 9].includes(x)); const reducer = (accumulator, currentValue) => accumulator + currentValue; let arrayA = scoreA.reduce(reducer); let arrayB = scoreB.reduce(reducer); let result = scoreA - scoreB; return result; }
3
4//パターン2
5NaN

js
1//パターン1:innerHTML = calcFn;にした場合。
2btn.addEventListener('click', (event) => {
3    event.preventDefault();
4    if (array.length === 10) {
5        alert('ok');
6        document.getElementById('text').innerHTML = calcFn;
7    } else {
8        alert('全て選択してください');
9    }
10});
11
12//パターン2:innerHTML = calcFn();にした場合。
13btn.addEventListener('click', (event) => {
14    event.preventDefault();
15    if (array.length === 10) {
16        alert('ok');
17        document.getElementById('text').innerHTML = calcFn();
18    } else {
19        alert('全て選択してください');
20    }
21});

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

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

行動規範の内容に同意します

回答2件

提示されているコードではresultに値を代入するのはcalcFnだけで、calcFnの呼び出しは見当たらないので、resultは当然undefinedになるのではないでしょうか。

投稿2021/05/23 12:18

itagagaki

総合スコア8402

You

2021/05/23 12:22

なるほど、理にかなっていますね。

行動規範の内容に同意します

自己解決

このように記述したら無事、行いたい処理を実行できました。
ありがとうございます。

js
1const radio = document.querySelectorAll('input');
2const btn = document.querySelector('button');
3const form = document.querySelector('form');
4const array = [];
5
6const one = document.getElementById('one');
7
8let result;
9
10radio.forEach(el => {
11    el.addEventListener('click', () => {
12        const n = el.name.replace('element', '') - 1;
13        if (el.checked) {
14            array[n] = Number(el.value);
15        }
16    });
17});
18
19btn.addEventListener('click', (event) => {
20    event.preventDefault();
21    if (array.length === 10) {
22        alert('ok');
23        calcFn();
24    } else {
25        alert('全て選択してください');
26    }
27});
28
29function calcFn() {
30    let scoreA = array.filter((_, x) => [0, 1, 3, 4, 7].includes(x));
31    let scoreB = array.filter((_, x) => [2, 5, 6, 8, 9].includes(x));
32
33    const reducer = (accumulator, currentValue) => accumulator + currentValue;
34    let arrayA = scoreA.reduce(reducer);
35    let arrayB = scoreB.reduce(reducer);
36
37    let result = arrayA- arrayB;
38    console.log(result);
39    document.getElementById('text').innerHTML = result;
40};