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

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

ただいまの
回答率

87.92%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 196

score 19

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;
//初期化できていないのはクリックして変わるセルのみ//
}

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="title" id="title">Get 200 or more score 😃</h1>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div class="flex">
        <div class="text-box">
            <p class="text" id="show-number">0</p>
        </div>
        <div class="column">
            <p class="text">Counter: <span id="count-number">15</span></p>
            <p class="text">HighScore: 0</p>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>
* {
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Gill Sans", sans-serif;
  background-color: gray;
}

.title {
  text-align: center;
  margin-bottom: 3rem;
  padding: 3rem;
  font-size: 3.6rem;
  font-weight: bold;
  color: #efefef;
}

table {
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

tbody {
  padding: 2rem;
  border-radius: 8px;
  border: 5px solid #efefef;
}

td {
  width: 60px;
  height: 60px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
  background-color: #fff;
  transition: 0.3s;
}

td:hover {
  background-color: #efefef;
}

.text-box {
  width: 120px;
  padding: 2rem;
  border: 5px solid #faeded;
  border-radius: 8px;
}

.text {
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
  color: #efefef;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.btn-wrapper {
  text-align: center;
  padding: 2rem;
}

.btn {
  padding: 1rem;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: bold;
  background-color: orange;
  color: #efefef;
  cursor: pointer;
}
const bodyWrap = document.querySelector('body');
const title = document.querySelector('#title');
const mass = document.querySelectorAll('td');
const countNumber = document.querySelector('#count-number');
const max = 30, min = 1;

const _fn = onceFun();
const randomNumber = [];
const showNumber = document.querySelector('#show-number');
const div = document.createElement('div');
const button = document.createElement('button');

let counter = 15;

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 
});

console.log(massOne);

function createNumber() {
    while (randomNumber.length < max) {
        let r = Math.floor(Math.random() * max) + min;
        if (randomNumber.indexOf(r) === -1) {
            randomNumber.push(r);
            return r;
        }
    }
};

function calcNumber() {
    showNumber.textContent = randomNumber.reduce(function (a, b) {
        return a + b;
    });
    if (showNumber.textContent >= 200) {
        bodyWrap.style.backgroundColor = 'green';
        title.textContent = 'Congratulations 🥳'
        _fn();
    }
};

function lessCounter() {
    if (counter > 0) {
        counter--;
        countNumber.innerHTML = counter;
    } else if (counter === 0) {
        counter = 0;
    }

}

function onceFun() {
    let executed = false;
    return function () {
        if (!executed) {
            executed = true;
            createButton();
        }
    }
};

function createButton() {
    div.classList.add('btn-wrapper');
    button.classList.add('btn');
    button.innerHTML = 'Restart';
    document.body.appendChild(div);
    div.appendChild(button);

    button.onclick = function () {
        initFn();
    }
};

function initFn() {
    counter = 15;
    countNumber.innerHTML = counter;

    bodyWrap.style.backgroundColor = 'gray';
    title.textContent = 'Get 200 or more score 😃';
    showNumber.textContent = 0;
}

// createButton.addEventListener('click',function(){
//     alert('test');
// })

// function createButton() {
//     document.body.appendChild(div);
//     div.appendChild(button);
// }
// function createButton() {
//     let div = document.createElement('div');
//     let button = document.createElement('button');
//     div.classList.add('btn-wrapper');
//     button.classList.add('btn');
//     button.innerHTML = 'Restart';
//     document.body.appendChild(div);
//     div.appendChild(button);
// }

// const createButton = (function () {
//     let executed = false;
//     return function () {
//         if (!executed) {
//             executed = true;

//             let div = document.createElement('div');
//             let button = document.createElement('button');
//             div.classList.add('btn-wrapper');
//             button.classList.add('btn');
//             button.innerHTML = 'Restart';
//             document.body.appendChild(div);
//             div.appendChild(button);
//         }
//     }
// })


// function createButton() {

//     let div = document.createElement('div');
//     let button = document.createElement('button');
//     div.classList.add('btn-wrapper');
//     button.classList.add('btn');
//     button.innerHTML = 'Restart';
//     document.body.appendChild(div);
//     div.appendChild(button);

//     return false;
// }


// var something = (function() {
//     var executed = false;
//     return function() {
//         if(!executed) {
//             executed = true;
//             console.log('test');
//         }
//     }
// });

// something();
// console.log(something);


// function createButton() {
//     let div = document.createElement('div');
//     let button = document.createElement('button');
//     div.classList.add('btn-wrapper');
//     button.classList.add('btn');
//     button.innerHTML = 'Restart';
//     document.body.appendChild(div);
//     div.appendChild(button);
// }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

サンプル

// Array.fromでmassを配列に変換し、Array.prototype.mapで全ての要素を処理したものをmassOneに戻します
const massOne = Array.from(mass).map(a => {
    a.addEventListener('click', function () {
        if (a.textContent === '') {
            this.textContent = createNumber();
            this.style.backgroundColor = 'orange';
            calcNumber();
            lessCounter();
        } else {
            alert('すでに選択されています。');
        }
    });
    return a
});
function initFn() {
    counter = 15;
    countNumber.innerHTML = counter;

    bodyWrap.style.backgroundColor = 'gray';
    title.textContent = 'Get 200 or more score 😃';
    showNumber.textContent = 0;
    randomNumber.length = 0; // Array.prototype.lengthを0にすると簡単に配列を初期化できます

    // Array.prototype.forEachで全ての要素に関数を適用させます
    massOne.forEach(function (a) {
      a.textContent = ''; // マスの中身を空にします
      a.removeAttribute('style'); // スタイルを初期化します
    })
};

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 21:09

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

    キャンセル

+1

const massOne = mass.forEach(

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/04/21 21:09

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

    キャンセル

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

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る