質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

744閲覧

引数に指定された数だけ要素を複製したい

sanezane

総合スコア91

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/05/30 02:46

編集2018/05/30 02:58

やりたいこと

引数に指定された数だけ同じ図形を複製する関数を作成したい。
この前段階でクリックして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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

numは単なる数値なので、num.lengthはundefinedとなり、0 < undefinedfalseと評価される結果、forループは1度も実行されません。

正しいループ条件は、i < numです。

投稿2018/05/30 02:51

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/05/30 03:03

ありがとうございます。 ループ条件修正してみたのですが、事象変わらずです。 イベントが正しくバインドされていないのでしょうか。 htmlを追加したので見て頂けませんでしょうか。
sanezane

2018/05/30 03:08

引数をなくして```for(var i = 0; i < 5; i++)```の条件で試してみたら期待の結果になりました。 引数の渡し方がわるいのでしょうか。
maisumakun

2018/05/30 03:08

add_Circleの引数になっている「num」が、外側のnumを隠蔽してしまいますので、引数のnumも消して「add_Circle()」としてください。
sanezane

2018/05/30 03:10

迅速な対応大変感謝いたします。おかげさまで期待通りの結果が得られました。
guest

0

maisumakunさんのおっしゃってることプラス、

javascript

1button.addEventListener("click", add_Circle, false);

このコードで実行しても、引数が渡されてないので、

javascript

1function add_Circle(num) { 2 // 省略 3}

関数内の、numには何も入ってないので、実行されませんよ。

引数を入れて実行するには下記になります。

javascript

1var num = 5; 2var button = document.getElementById("button"); 3 4button.addEventListener("click", add_Circle, false); 5// 下記のようにすると、クリックイベントに指定した関数の引数に、値を入れることができる 6button.eventParam = num; 7 8function add_Circle(num) { 9 for (var i = 0; i < num; i++) { 10 // 以下省略 11 } 12}

投稿2018/05/30 03:14

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/05/31 14:42

miyabi_takatsuk さん ありがとうございます! javascriptでparam渡すときはこういう書き方をするのですね。とても勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問