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

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// }

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

回答2件

ベストアンサー

戻り値が必要な場合は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};