やりたいこと
引数に指定された数だけ同じ図形を複製する関数を作成したい。
この前段階でクリックして1つずつ増やす関数を作成し動作確認済みです。
for文を追加したところイベントが反応しなくなってしまいました。
コンソールにもなんにも出ず、解析の仕方がわかりません。
どこに問題があるのでしょうか、解析の仕方と合わせてご教授いただきますと幸いです。
javascript
1 var num = 5; //とりあえず5個複製する宣言 2 var button = document.getElementById("button"); 3 button.addEventListener("click", add_Circle, false); 4 function add_Circle(num) { 5 for (var i = 0; i < num.length; i++) { //←---追加したfor文--- 6 var NS = "http://www.w3.org/2000/svg"; 7 var svg = document.createElementNS(NS, "svg"); 8 svg.setAttribute("viewbox", "0 0 200 200"); 9 svg.style.width = "150px"; 10 svg.style.width = "150px"; 11 var fig = document.createElementNS(NS, "circle");//新規に要素(タグ)を作成 12 fig.setAttribute("cx", "50");//以下、設定 13 fig.setAttribute("cy", "50"); 14 fig.setAttribute("r", "30"); 15 fig.setAttribute("fill", "green"); 16 svg.appendChild(fig);//生成する要素の作成(要素に値を追加) 17 document.body.appendChild(svg);//このページ(document.body)の最後に生成した要素を追加 18 } 19 }
html
1<button type="button" id="button">add_Circle</button>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/30 03:03
2018/05/30 03:08
2018/05/30 03:08
2018/05/30 03:10