一度押したボタンを処理が全て終わるまでは押せない状態にしたい

実現したいこと

disabled などで無効にして押せないボタンではなく、
仕様は変化せず、一度目以降は押しても何も発動しないボタンが作りたいです。

ボタンを押す
↓
BOXが出現する（この時点でボタンを押しても何も起きない）
↓
BOXをクリックするとアラートが出る
↓
アラートをOKするとBOXは削除され、最初の画面に戻る
↓
またボタンを押すとBOXが出現、、、という繰り返しができるプログラム

appendChildを使用しての追加、削除を目的とした内容になってます。

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

ボタンが再度押せない
エラーは出ていません

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson07 イベント付与</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="wrapper"> <button onclick="boxVisible()" id="button">ボックス表示</button> <div id="box-area">  </div> </div>

<script>

    const button=document.querySelector('#button');
   
        function boxVisible(){
            
            button.onclick = () =>{
                return false;
            };
            let boxArea=document.querySelector('#box-area');
            let box=document.createElement('p');
            boxArea.appendChild(box);
            box.classList.add("box");

            box.addEventListener('click',()=>{
                alert('生成したボックスをクリックしました。');
                boxArea.removeChild(box);

                });
        };
</script>

</body> </html>

ソースコード
Javascript

### 試したこと
今のコードだとアラートをOKした後にボタンを押すと押せないままなのですが、
button.onclick = () =>{return false; };の解除方法となるとキャンセルのキャンセルをする？？ということになってしまうので
addEventListenerで、preventdefaultを使用したのですが、うまく発動せず、永遠にボタンが押せてBOXが押した分だけ出てしまいます。

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

CSSでは特別なことはしていません
html {

}

body {
    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.box {
    width: 320px;
    height: 180px;
    background-color: #fdd;
}

退会済みユーザー

2023/10/19 14:08 編集

タイトルと質問の内容が食い違ってません？タイトル「一度押したボタンを処理が全て終わるまでは押せない状態にしたい」質問の内容「disabled などで無効にして押せないボタンではなく、仕様は変化せず、一度目以降は押しても何も発動しないボタンが作りたい」どっち？

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

回答2件

こんな感じで

javascript
1<script>
2document.addEventListener('click',({target})=>{
3  const boxArea=document.querySelector('#box-area');
4  if(target.matches('#button')){
5    target.disabled=true;
6    const box=Object.assign(document.createElement('p'),{className:'box',textContent:'box'});
7    boxArea.appendChild(box);
8  }
9  if(target.matches('.box')){
10    alert('生成したボックスをクリックしました。');
11    target.remove();
12    button.disabled=false;
13  }
14});
15</script>
16<div id="wrapper">
17<button id="button">ボックス表示</button>
18<div id="box-area">
19<!-- ここにボックスを追加する -->
20</div>
21</div><!-- wrapper -->

投稿2023/10/20 00:15

yambejp

総合スコア117820

myunhen0301

2023/10/20 00:22

回答ありがとうございます！こういった書き方もあるのですね。とても勉強になりますありがとうございます！！

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

ベストアンサー

js
1（HTML略）
2    <script>
3        const button = document.querySelector('#button');
4        button.isEnabled = true;
5        function boxVisible() {
6            if (!button.isEnabled) return;
7            button.isEnabled = false;
8            let boxArea = document.querySelector('#box-area');
9            let box = document.createElement('p');
10            boxArea.appendChild(box);
11            box.classList.add("box");
12
13            box.addEventListener('click', () => {
14                alert('生成したボックスをクリックしました。');
15                boxArea.removeChild(box);
16                button.isEnabled = true;
17            });
18        };
19    </script>

投稿2023/10/19 14:05

退会済みユーザー

総合スコア0

myunhen0301

2023/10/20 00:14

回答、コメントありがとうございます。まさにこのコードのようなボタンが作りたかったのです。タイトルの『押せない』という書き方は混乱する書き方でしたね、、次回からは書き方を間違えないようにしたいと思います。 isEnabledに関してもこの方法がある事を初めて知りました。とても勉強になりました。ありがとうございます！！

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

あなたの回答