実現したいこと
ボックスをクリックして出現するボックスが一つになるようにしたい
ボックスが出現しているときはボタンをクリックしても消すまで出現できないようにしたい
ここに実現したいことを箇条書きで書いてください。
ボックスを二個出てしまうのをひとつにしたい
ボックスを消すまでボタンを押してもボックスがでないようにしたい
前提
ここに質問の内容を詳しく書いてください。
jsでDOMを使用してボタンをクリックするとボックスを出力し、ボックスをクリックするとアラートが発生して消える使用にしたい
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
なし
エラーメッセージ
### 該当のソースコード <!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 id="button" onclick="boxVisible()">ボックス表示</button> <div id="box-area"> <!-- ここにボックスを追加する --> </div> </div><!-- wrapper --> <script> var crtElement = null; var parent = document.querySelector('#box-area'); var btnElement = document.querySelector('button'); btnElement.addEventListener('click',boxVisible); //DOMを使ってboxを作りたい function boxVisible() { if(crtElement) return; var crtElement = document.createElement("div"); crtElement.className = 'box' crtElement.addEventListener('click',e=>{ var boxElement = document.querySelector('.box'); crtElement.remove(); crtElement = null; alert('生成したボックスをクリックしました') }) parent.appendChild(crtElement); event.preventDefault(); var boxElement = document.querySelector('.box'); console.log(2) } </script> </body> </html> ```ここに言語名を入力 ソースコード
試したこと
removeを記入してみたりしたが変化はなし
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント