合計値が200を超えた時にリセットボタンが表示されない問題を解決したい。

200かそれ以上でリセットボタンを一度だけ表示させる。

js
1function onceFun() {
2    let executed = false;
3    return function () {
4        if (!executed) {
5            executed = true;
6            createButton();
7        }
8    }
9};
10
11function createButton() {
12    let div = document.createElement('div');
13    let button = document.createElement('button');
14    div.classList.add('btn-wrapper');
15    button.classList.add('btn');
16    button.innerHTML = 'Restart';
17    document.body.appendChild(div);
18    div.appendChild(button);
19}

リセットボタンが表示されない。

onceFunの中に格納されたfunctionが一度だけ実行されるようにしたつもり。
200を超えて以後、他のパネルを選択した際にリセットボタンが表示されたため、それを阻止したかった。

該当のソースコード

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

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

試したこと

こちらのサイトを参考に実装を試みた。

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

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

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

回答1件

ベストアンサー

こういうことかな。
（そもそも、ボタンがあるかidとかクラスで探せばよい様な気がします）

js
1// 略
2        // createButton();
3        // onceFun();
4        _fn();
5
6// 略
7
8function onceFun() {
9    let executed = false;
10    return function () {
11        if (!executed) {
12            executed = true;
13            createButton();
14        }
15    }
16};
17const _fn = onceFun();