JavaSciprtについて質問です。 新しいDOM生成とイベント付与をしたいです。 「ボックス表示」クリック時以下、box-area内にボックスを表示したいです。 表示されたボックスをクリックされた時、ボックスを除去したいです。非表示ではなく、除去で上記の動作を作りたいです。 ボックスが表示されている間、「ボックス表示」を複数回クリックしても処理しないようにしたいです。 JavaScriptで、createElement、addEventListenerを使って完成させたいです。 <JavaScrpt> <!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()">ボックス表示</button> <div id="box-area"> <!-- ここにボックスを追加する --> </div> </div><!-- wrapper --> <script> function boxVisible() { } </script> </body> </html> <css> @charset "UTF-8"; /* reset */ body, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { margin: 0; padding: 0; border: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; list-style-type: none; border-collapse: collapse; } textarea { font-size: 100%; vertical-align:middle;} img { border-style: none; display: block; } hr { display: none; } em{font-style: normal} input{line-height:auto;vertical-align:middle;} strong.more{color:#c30} a{text-decoration: none;} 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; }
JavaScript
