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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1403閲覧

foreachで生成した要素を他の関数に渡すには?

Yuki2

総合スコア52

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2021/04/21 04:36

foreachで生成させたセルを白紙に戻す処理を実装する。

ゲームをクリア、もしくはゲームオーバーになった際に全ての処理をリセットさせる。
foreachではreturnがundefinedに変わるため、そこの変数をinitFn()に受け渡して白紙に出来ない状態を解決したい。

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

//クリックして変わったセルを白紙に戻すためにinitFn()に変数を渡したい// const massOne = mass.forEach(a => { a.addEventListener('click', function () { if (a.textContent === '') { this.textContent = createNumber(); this.style.backgroundColor = 'orange'; calcNumber(); lessCounter(); } else { alert('すでに選択されています。'); } }); let element = a.textContent; return element //returnはundefinedが帰る// }); //初期化を行うfunction// function initFn() { counter = 15; countNumber.innerHTML = counter; bodyWrap.style.backgroundColor = 'gray'; title.textContent = 'Get 200 or more score ????'; showNumber.textContent = 0; //初期化できていないのはクリックして変わるセルのみ// }

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>test</title> 9 <link rel="stylesheet" href="style.css"> 10</head> 11 12<body> 13 <h1 class="title" id="title">Get 200 or more score ????</h1> 14 <table> 15 <tr> 16 <td></td> 17 <td></td> 18 <td></td> 19 <td></td> 20 <td></td> 21 <td></td> 22 <td></td> 23 <td></td> 24 <td></td> 25 <td></td> 26 </tr> 27 <tr> 28 <td></td> 29 <td></td> 30 <td></td> 31 <td></td> 32 <td></td> 33 <td></td> 34 <td></td> 35 <td></td> 36 <td></td> 37 <td></td> 38 </tr> 39 <tr> 40 <td></td> 41 <td></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 <td></td> 48 <td></td> 49 <td></td> 50 </tr> 51 </table> 52 <div class="flex"> 53 <div class="text-box"> 54 <p class="text" id="show-number">0</p> 55 </div> 56 <div class="column"> 57 <p class="text">Counter: <span id="count-number">15</span></p> 58 <p class="text">HighScore: 0</p> 59 </div> 60 </div> 61 <script src="script.js"></script> 62</body> 63 64</html>

css

1* { 2 padding: 0; 3 margin: 0; 4} 5 6html { 7 font-size: 62.5%; 8} 9 10body { 11 font-family: "Gill Sans", sans-serif; 12 background-color: gray; 13} 14 15.title { 16 text-align: center; 17 margin-bottom: 3rem; 18 padding: 3rem; 19 font-size: 3.6rem; 20 font-weight: bold; 21 color: #efefef; 22} 23 24table { 25 display: flex; 26 justify-content: center; 27 margin-bottom: 5rem; 28} 29 30tbody { 31 padding: 2rem; 32 border-radius: 8px; 33 border: 5px solid #efefef; 34} 35 36td { 37 width: 60px; 38 height: 60px; 39 text-align: center; 40 font-size: 1.6rem; 41 font-weight: bold; 42 cursor: pointer; 43 color: #fff; 44 background-color: #fff; 45 transition: 0.3s; 46} 47 48td:hover { 49 background-color: #efefef; 50} 51 52.text-box { 53 width: 120px; 54 padding: 2rem; 55 border: 5px solid #faeded; 56 border-radius: 8px; 57} 58 59.text { 60 font-size: 1.8rem; 61 font-weight: bold; 62 text-align: center; 63 color: #efefef; 64} 65 66.flex { 67 display: flex; 68 justify-content: center; 69 align-items: center; 70 gap: 2rem; 71} 72 73.btn-wrapper { 74 text-align: center; 75 padding: 2rem; 76} 77 78.btn { 79 padding: 1rem; 80 border-radius: 8px; 81 font-size: 2rem; 82 font-weight: bold; 83 background-color: orange; 84 color: #efefef; 85 cursor: pointer; 86}

js

1const bodyWrap = document.querySelector('body'); 2const title = document.querySelector('#title'); 3const mass = document.querySelectorAll('td'); 4const countNumber = document.querySelector('#count-number'); 5const max = 30, min = 1; 6 7const _fn = onceFun(); 8const randomNumber = []; 9const showNumber = document.querySelector('#show-number'); 10const div = document.createElement('div'); 11const button = document.createElement('button'); 12 13let counter = 15; 14 15const massOne = mass.forEach(a => { 16 a.addEventListener('click', function () { 17 if (a.textContent === '') { 18 this.textContent = createNumber(); 19 this.style.backgroundColor = 'orange'; 20 calcNumber(); 21 lessCounter(); 22 } else { 23 alert('すでに選択されています。'); 24 } 25 }); 26 let element = a.textContent; 27 return element 28}); 29 30console.log(massOne); 31 32function createNumber() { 33 while (randomNumber.length < max) { 34 let r = Math.floor(Math.random() * max) + min; 35 if (randomNumber.indexOf(r) === -1) { 36 randomNumber.push(r); 37 return r; 38 } 39 } 40}; 41 42function calcNumber() { 43 showNumber.textContent = randomNumber.reduce(function (a, b) { 44 return a + b; 45 }); 46 if (showNumber.textContent >= 200) { 47 bodyWrap.style.backgroundColor = 'green'; 48 title.textContent = 'Congratulations ????' 49 _fn(); 50 } 51}; 52 53function lessCounter() { 54 if (counter > 0) { 55 counter--; 56 countNumber.innerHTML = counter; 57 } else if (counter === 0) { 58 counter = 0; 59 } 60 61} 62 63function onceFun() { 64 let executed = false; 65 return function () { 66 if (!executed) { 67 executed = true; 68 createButton(); 69 } 70 } 71}; 72 73function createButton() { 74 div.classList.add('btn-wrapper'); 75 button.classList.add('btn'); 76 button.innerHTML = 'Restart'; 77 document.body.appendChild(div); 78 div.appendChild(button); 79 80 button.onclick = function () { 81 initFn(); 82 } 83}; 84 85function initFn() { 86 counter = 15; 87 countNumber.innerHTML = counter; 88 89 bodyWrap.style.backgroundColor = 'gray'; 90 title.textContent = 'Get 200 or more score ????'; 91 showNumber.textContent = 0; 92} 93 94// createButton.addEventListener('click',function(){ 95// alert('test'); 96// }) 97 98// function createButton() { 99// document.body.appendChild(div); 100// div.appendChild(button); 101// } 102// function createButton() { 103// let div = document.createElement('div'); 104// let button = document.createElement('button'); 105// div.classList.add('btn-wrapper'); 106// button.classList.add('btn'); 107// button.innerHTML = 'Restart'; 108// document.body.appendChild(div); 109// div.appendChild(button); 110// } 111 112// const createButton = (function () { 113// let executed = false; 114// return function () { 115// if (!executed) { 116// executed = true; 117 118// let div = document.createElement('div'); 119// let button = document.createElement('button'); 120// div.classList.add('btn-wrapper'); 121// button.classList.add('btn'); 122// button.innerHTML = 'Restart'; 123// document.body.appendChild(div); 124// div.appendChild(button); 125// } 126// } 127// }) 128 129 130// function createButton() { 131 132// let div = document.createElement('div'); 133// let button = document.createElement('button'); 134// div.classList.add('btn-wrapper'); 135// button.classList.add('btn'); 136// button.innerHTML = 'Restart'; 137// document.body.appendChild(div); 138// div.appendChild(button); 139 140// return false; 141// } 142 143 144// var something = (function() { 145// var executed = false; 146// return function() { 147// if(!executed) { 148// executed = true; 149// console.log('test'); 150// } 151// } 152// }); 153 154// something(); 155// console.log(something); 156 157 158// function createButton() { 159// let div = document.createElement('div'); 160// let button = document.createElement('button'); 161// div.classList.add('btn-wrapper'); 162// button.classList.add('btn'); 163// button.innerHTML = 'Restart'; 164// document.body.appendChild(div); 165// div.appendChild(button); 166// }

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

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

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

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

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

guest

回答2

0

ベストアンサー

戻り値が必要な場合はArray.prototype.mapを使いましょう

サンプル

js

1// Array.fromでmassを配列に変換し、Array.prototype.mapで全ての要素を処理したものをmassOneに戻します 2const massOne = Array.from(mass).map(a => { 3 a.addEventListener('click', function () { 4 if (a.textContent === '') { 5 this.textContent = createNumber(); 6 this.style.backgroundColor = 'orange'; 7 calcNumber(); 8 lessCounter(); 9 } else { 10 alert('すでに選択されています。'); 11 } 12 }); 13 return a 14});

js

1function initFn() { 2 counter = 15; 3 countNumber.innerHTML = counter; 4 5 bodyWrap.style.backgroundColor = 'gray'; 6 title.textContent = 'Get 200 or more score ????'; 7 showNumber.textContent = 0; 8 randomNumber.length = 0; // Array.prototype.lengthを0にすると簡単に配列を初期化できます 9 10 // Array.prototype.forEachで全ての要素に関数を適用させます 11 massOne.forEach(function (a) { 12 a.textContent = ''; // マスの中身を空にします 13 a.removeAttribute('style'); // スタイルを初期化します 14 }) 15};

投稿2021/04/21 05:08

itepechi

総合スコア248

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

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

Yuki2

2021/04/21 12:09

ご丁寧に回答ありがとうございます。 無事に解決できたと同時に新しい技術も習得する事ができました。
guest

0

const massOne = mass.forEach(

forEachは返り値がundefinedなのでmassOneで何をうけたいのかわかりません

投稿2021/04/21 04:44

yambejp

総合スコア114572

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

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

Yuki2

2021/04/21 12:09

ドキュメントの提示ありがとうございます。 参考にさせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問