関数の結果をreturnしたいが、undifindになる

Question

前提・実現したいこと

javascriptでもぐらたたきゲームを作っています。
獲得点数に応じて画面を表示したいです。
もぐらをクリックした数だけ点数を加算する関数の結果を、点数に応じて条件分岐しているところにreturnしたいです。

発生している問題・エラーメッセージ

getScore()を変数scoreに代入しているのですが、scoreをconsole.logで確認するとundifindと表示されます。
getScoreはreturnで結果を返すように記載しています。

該当のソースコード

    class Panel{
        constructor() {
            const section = document.createElement('div');
            section.classList.add('mole__item');

            this.img = document.createElement('img');
            this.img.src = this.getRandomImage();
            section.appendChild(this.img);
            const container = document.getElementById('container');
            container.appendChild(section);
            

        }

        

        getRandomImage() {
            const images = [
                'img/cat.png',
                'img/mole-work.png',
                'img/dog.png',
            ];

            
            return images[Math.floor(Math.random() * images.length)];

        }

        

        spin() {
            let timer = document.getElementById('timer');
            this.img.src = this.getRandomImage();
            if(this.img.src === 'http://127.0.0.1:5502/img/mole-work.png') {
                this.img.classList.add('mole');

            }else if(this.img.src !== 'http://127.0.0.1:5502/img/mole-work.png') {
                this.img.classList.remove('mole');
            }

            this.timeoutId = setTimeout(() => {
                this.spin();
                if(timer.classList.contains('stop')) {
                    clearTimeout(this.timeoutId);
                }
            }, 800);
        }
        
        
    }

    

    const panels = [
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
        new Panel(),
    ];

        const btn = document.getElementById('btn__start');
        let success = document.getElementById('success');
        let good = document.getElementById('good');
        let cheer = document.getElementById('cheer');
　　　　　function score(callback) {
            callback();
        }
        

    btn.addEventListener('click',() => {
        btn.classList.add('start');
        timer();
        panels.forEach(panel => {
            panel.spin();
        })
        if(btn.classList.contains('start') === true) {
     
          function getScore() {
            const imgs = document.querySelectorAll('img');
            for(let i =0; i < imgs.length; i++ )  {
                imgs[i].addEventListener('click', () => {
                    if(imgs[i].classList.contains('mole') === true) {
                        point++;
                        console.log(point);
                    }
                });
            }
            };
            const totallScore = score(getScore);//
        let timer = document.getElementById('timer');
            if(timer.textContent === '0 秒') {//タイマーが０秒になった時に点数に応じて条件分岐する
                if(totallScore >= 7) {
                    success.style.display ='block';
                    success.classList.add('block');
                }else if(totallScore >= 5) {
                    good.style.display ='block';
                    good.classList.add('block');
                }else{
                    cheer.style.display = 'block';
                    cheer.classList.add('block');
                }
            }
        }
    });

<h1>もぐらたたき！！</h1>
    <div class="btn__container">
        <div id="btn__start" class="btn btn__start">Start</div>
    </div>

    <div id="container">
      
    <div id="timer">60 秒</div>

    <div id="success" class="score">
        <div class="score__container score__success">
            <div class="score__title">すごい！！</div>
            <div class="score__score">40<span>点</span></div><!-- 点数は仮です -->
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>
    <div id="good" class="score">
        <class class="score__container score__success">
            <div class="score__title">この調子！</div>
            <div class="score__score">40<span>点</span></div>
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>
    <div id="cheer" class="score">
        <div class="score__container score__success">
            <div class="score__title">頑張ろう！</div>
            <div class="score__score">40<span>点</span></div>
         <div id="btn__reset" class="btn btn__continue">Continue!!</div>
        </div>
    </div>

//テストコード
{
const btn = document.getElementById('btn');

function callback() {
    btn.classList.add('active');
}

btn.addEventListener('click',callback);
}

補足情報

mac、VScode使用。

Comments

[coco_bauer]

「undifindと表示されます」というのは、どこで起きるのですか？
それと「なぜreturnできないのでしょうか？」とは、どのように関係しているのですか？　（"returnできない"というのが、どんな現象を意味しているのか判りません）

[kaaaarin]

わかりにくく、申し訳ございません。
訂正しました。よろしくお願いいたします。

[hoshi-takanori]

getScore の中には return point++; と書いてありますが、これは addEventListener に渡しているアロー関数の戻り値なので、getScore 自体は何も return していません。

[kaaaarin]

回答いただき、誠にありがとうございます。
addEventListenerの戻り値をlet scoreに渡すにはどうしたらいいでしょうか？
コールバック関数を絡めて調べたり考えましたが、どうにもわかりません。
ご教授いただけると幸いです。よろしくお願いいたします。

Answer 1

コールバック関数

• コールバック関数をGoogle検索で調べてください
• コールバック関数のテストコードを書いてください

そうすれば、「コールバック関数の返り値」と「コールバック関数を引数指定された関数の返り値」が同期しない理由が分かります。

※addEventListener周りでこの誤解をする方が多いですが、根本から理解しないと、他のコールバック関数でも同様の誤解が起こりえます。

コールバック関数のテストコード

シンプルなコールバック関数のテストコードを書けば、

function sampleCall (a, b, callbackfn) {
  callbackfn(a, b);
}

alert(sampleCall(1, 2, function (a, b) {
  return a + b;
}));

• コールバック関数(callbackfn)の返り値
• コールバック関数を引数で受け取る関数(sampleCall)の返り値

の2つが一致しない事を読み取れます。

sampleCallの返り値を定義するには、sampleCall内で return 文を書かなければなりません。

Re: kaaaarin さん

Comments

[kaaaarin]

ご回答いただき、大変感謝しております。
コールバック関数を調べました。
理解が及ばず、今回のコードでなぜコールバック関数が必要なのか、わかりませんでした。
一応、コールバック関数を使って書き、コードを訂正しました。
const totalScoreにgetScoreの値（ポイントの合計）を返したかったのですが、またしてもundifindとなりました。
addEventListenerとコールバック関数の関係をご教授していただけないでしょうか？よろしくお願いいたします。

[think49]

コールバック関数を理解する為にどのようなテストコードを書いたのでしょう？

一応、回答に追記しましたが、テストコードは自分で書いて、自分で確認する術を身につけなければ、「いつまでも、他人に聞かないと分からない」ということになりかねませんよ。