質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

関数型プログラミング

関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

Q&A

1回答

1986閲覧

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

kaaaarin

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

関数型プログラミング

関数型プログラミングとは、関数を用いて演算子を構築し、算出し、コンピュータプログラムを構成する枠組みです。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

0グッド

0クリップ

投稿2020/05/24 10:12

編集2022/01/12 10:55

前提・実現したいこと

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

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

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

該当のソースコード

javascript

1 class Panel{ 2 constructor() { 3 const section = document.createElement('div'); 4 section.classList.add('mole__item'); 5 6 this.img = document.createElement('img'); 7 this.img.src = this.getRandomImage(); 8 section.appendChild(this.img); 9 const container = document.getElementById('container'); 10 container.appendChild(section); 11 12 13 } 14 15 16 17 getRandomImage() { 18 const images = [ 19 'img/cat.png', 20 'img/mole-work.png', 21 'img/dog.png', 22 ]; 23 24 25 return images[Math.floor(Math.random() * images.length)]; 26 27 } 28 29 30 31 spin() { 32 let timer = document.getElementById('timer'); 33 this.img.src = this.getRandomImage(); 34 if(this.img.src === 'http://127.0.0.1:5502/img/mole-work.png') { 35 this.img.classList.add('mole'); 36 37 }else if(this.img.src !== 'http://127.0.0.1:5502/img/mole-work.png') { 38 this.img.classList.remove('mole'); 39 } 40 41 this.timeoutId = setTimeout(() => { 42 this.spin(); 43 if(timer.classList.contains('stop')) { 44 clearTimeout(this.timeoutId); 45 } 46 }, 800); 47 } 48 49 50 } 51 52 53 54 const panels = [ 55 new Panel(), 56 new Panel(), 57 new Panel(), 58 new Panel(), 59 new Panel(), 60 new Panel(), 61 new Panel(), 62 new Panel(), 63 new Panel(), 64 ]; 65 66 const btn = document.getElementById('btn__start'); 67 let success = document.getElementById('success'); 68 let good = document.getElementById('good'); 69 let cheer = document.getElementById('cheer'); 70     function score(callback) { 71 callback(); 72 } 73 74 75 btn.addEventListener('click',() => { 76 btn.classList.add('start'); 77 timer(); 78 panels.forEach(panel => { 79 panel.spin(); 80 }) 81 if(btn.classList.contains('start') === true) { 82 83 function getScore() { 84 const imgs = document.querySelectorAll('img'); 85 for(let i =0; i < imgs.length; i++ ) { 86 imgs[i].addEventListener('click', () => { 87 if(imgs[i].classList.contains('mole') === true) { 88 point++; 89 console.log(point); 90 } 91 }); 92 } 93 }; 94 const totallScore = score(getScore);// 95 let timer = document.getElementById('timer'); 96 if(timer.textContent === '0 秒') {//タイマーが0秒になった時に点数に応じて条件分岐する 97 if(totallScore >= 7) { 98 success.style.display ='block'; 99 success.classList.add('block'); 100 }else if(totallScore >= 5) { 101 good.style.display ='block'; 102 good.classList.add('block'); 103 }else{ 104 cheer.style.display = 'block'; 105 cheer.classList.add('block'); 106 } 107 } 108 } 109 });

HTML

1<h1>もぐらたたき!!</h1> 2 <div class="btn__container"> 3 <div id="btn__start" class="btn btn__start">Start</div> 4 </div> 5 6 <div id="container"> 7 8 <div id="timer">60 秒</div> 9 10 <div id="success" class="score"> 11 <div class="score__container score__success"> 12 <div class="score__title">すごい!!</div> 13 <div class="score__score">40<span>点</span></div><!-- 点数は仮です --> 14 <div id="btn__reset" class="btn btn__continue">Continue!!</div> 15 </div> 16 </div> 17 <div id="good" class="score"> 18 <class class="score__container score__success"> 19 <div class="score__title">この調子!</div> 20 <div class="score__score">40<span>点</span></div> 21 <div id="btn__reset" class="btn btn__continue">Continue!!</div> 22 </div> 23 </div> 24 <div id="cheer" class="score"> 25 <div class="score__container score__success"> 26 <div class="score__title">頑張ろう!</div> 27 <div class="score__score">40<span>点</span></div> 28 <div id="btn__reset" class="btn btn__continue">Continue!!</div> 29 </div> 30 </div>

js

1//テストコード 2{ 3const btn = document.getElementById('btn'); 4 5function callback() { 6 btn.classList.add('active'); 7} 8 9btn.addEventListener('click',callback); 10} 11

HTML

1

補足情報

mac、VScode使用。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

coco_bauer

2020/05/24 10:47

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

2020/05/24 11:03

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

2020/05/24 12:48

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

2020/05/27 14:20

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

回答1

0

コールバック関数

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

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

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

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

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

JavaScript

1function sampleCall (a, b, callbackfn) { 2 callbackfn(a, b); 3} 4 5alert(sampleCall(1, 2, function (a, b) { 6 return a + b; 7}));
  • コールバック関数(callbackfn)の返り値
  • コールバック関数を引数で受け取る関数(sampleCall)の返り値

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

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

Re: kaaaarin さん

投稿2020/05/24 14:01

編集2020/05/28 03:45
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaaaarin

2020/05/27 14:30

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

2020/05/28 03:44 編集

コールバック関数を理解する為にどのようなテストコードを書いたのでしょう? 一応、回答に追記しましたが、テストコードは自分で書いて、自分で確認する術を身につけなければ、「いつまでも、他人に聞かないと分からない」ということになりかねませんよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問