DOMを使用して四角を複数個作成

前提・実現したいこと

初めまして、プログラミング初心者です。
JavaScriptのDOMについて勉強中で、現在課題の一つに取り組んでいます。

課題の内容は、

ボタンを押す度に縦横100pxの赤い四角を作成する。

というものです。

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

ボタンを押すと赤い四角を１つ作成できますが、ボタンを複数回押しても四角は複数個作成されません。

該当のソースコード

Javascript
1        <div id="app">
2            <button class = "button">add</button>
3        </div>
4
5        <script>
6
7            //div boxを指定
8            var parent = document.querySelector('#app');
9
10            //buttonを指定
11            var btnElement = document.querySelector('.button');
12
13            btnElement.onclick = function(){
14                //要素作成
15                var crtElement = document.createElement("div");
16                //クラス追加
17                crtElement.className = 'box'
18                //親要素に追加
19                parent.appendChild(crtElement);
20
21                //作成したdiv boxを指定
22                var boxElement = document.querySelector('.box');
23
24                //BoxCSS
25                boxElement.style.height = '100px';
26                boxElement.style.width = '100px';
27                boxElement.style.backgroundColor = '#f00';
28
29                console.log('good');
30            }

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

回答1件

ベストアンサー

JavaScriptをこのように追加すると、うまくいくと思います。

JS
1//div boxを指定
2var parent = document.querySelector("#app");
3
4//buttonを指定
5var btnElement = document.querySelector(".button");
6
7btnElement.onclick = function() {
8    //要素作成
9    var crtElement = document.createElement("div");
10    //クラス追加
11    crtElement.className = "box";
12    //親要素に追加
13    parent.appendChild(crtElement);
14
15    /*
16    //作成したdiv boxを指定
17    var boxElement = document.querySelector(".box");
18
19    //BoxCSS
20    boxElement.style.height = "100px";
21    boxElement.style.width = "100px";
22    boxElement.style.backgroundColor = "#f00";
23    */
24
25    crtElement.style.height = "100px";
26    crtElement.style.width = "100px";
27    crtElement.style.backgroundColor = "#f00";
28
29    console.log("good");
30};
31