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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2864閲覧

動的生成したinnerHTML内IDにfor文の[i]を使って要素挿入したいです。

hectopascal1013

総合スコア466

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/09/22 15:52

前提・実現したいこと

document.getElementById('"y"+[k]').value=y[k];
Id名指定時に"'の入れ方がまずいせいか、動的に扱えません。
静的に扱う場合、
document.getElementById('y1').value=y1;
のように挿入できていますが、それができません。

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

エラーメッセージ undefined is not an object(evaluating 'y[k]'

該当のソースコード

javascript

1document.getElementById("fm").innerHTML=""; 2var arr=[]; 3 for(k=0;k<3;k++){ 4document.getElementById("fm").innerHTML+= 5('p'+[k]+'(<input type="number" size="10" id="x'+[k]+'" placeholder="x'+[k]+'">'); 6document.getElementById("fm").innerHTML+= 7( ',<input type="number" size="10" id="y'+[k]+'" placeholder="y'+[k]+'">)<br />'); 8 9document.getElementById('"y"+[k]').value=y[k];

試したこと

Id指定方法で'を”に変えたり、\を入れたりもしたのですが解決してません。
よろしくお願い申し上げます。

補足情報(FW/ツールのバージョンなど)

coda2.6.10
etc...

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

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

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

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

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

kei344

2018/09/22 16:04

(質問文は編集できます)コードが途中で切れているので、修正してください。
hectopascal1013

2018/09/22 16:36

すいません。乱数を生成して、x0,y0~x2,y2にそれぞれ挿入したいです。コードが途中で途切れているのは、これ以上は、私にはわかりませんでしたので。すいません。
kei344

2018/09/22 16:38

エラーの再現もこのコードでは出来ないのでは?
hectopascal1013

2018/09/22 16:40

エラー部分は入っていますので、再現は可能かと。乱数生成部分は以前の質問にも関連することでして、融合させるのが難しいですが、書いてみます。
guest

回答1

0

ベストアンサー

コード長くなっちゃいますが、私はこの方がいいと思います。
要素はinnerHTMLで文字列でぶっこむより、ちゃんとcreateElementした方がいいです。
コードの中にテンプレートリテラル使っちゃってますが、わからなければ以下のように置き換えて読んでください。

`x${k}` ―→ 'x' + k

js

1var fm = document.getElementById('fm'); 2fm.innerHTML=""; 3 4var arr=[]; 5 6for(k = 0; k < 3; k++){ 7 var inputX = document.createElement('input'); 8 inputX.type = 'number'; 9 inputX.size = 10; 10 inputX.id = `x${k}`; 11 inputX.placeholder = `x${k}`; 12 13 var inputY = document.createElement('input'); 14 inputY.type = 'number'; 15 inputY.size = 10; 16 inputY.id = `y${k}`; 17 inputY.placeholder = `y${k}`; 18 inputY.value = `y${k}`; 19 20 var br = document.createElement('br'); 21 22 var before = document.createTextNode(`p${k}(`); 23 var comma = document.createTextNode(','); 24 var after = document.createTextNode(')'); 25 26 fm.append(before); 27 fm.append(inputX); 28 fm.append(comma); 29 fm.append(inputY); 30 fm.append(after); 31 fm.append(br); 32} 33

で、質問者さんの書いたコードですが、

[k]こう書いた場合、要素kを持つ配列を作っています。

'p'+[k]+...このように書かれているとき、要素kを持つ配列を文字列結合するため.toString()されることでkという文字に置き換わります。
はっきり言って無駄です。
'p' + k + ...これでいいのです。
いちいち配列作る必要なんてありません。

投稿2018/09/22 21:57

spookybird

総合スコア1803

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

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

hectopascal1013

2018/09/22 22:30

>ちゃんとcreateElementした方がいいです。 >いちいち配列作る必要なんてありません。 おおぉ、ありがとうございます。そうした細かい指摘もしていただけると、まだ初歩の初歩の段階の自分には大変参考になります。 何でもカンでもinnerHTMLに入れてしまったり、消えるのが怖くて配列にしてしまったりと言うのは、そのとおりですw 視点を広げて頂けるので世界が広がります。 createElementは苦手ではありますが、癖を付けるようにしたいと思います。 今回の解決策はまさにテンプレートリテラルのことでしたね。ご説明引用までもありがとうございます。 勉強しなければいけない量は多いですが、大変ためになります。ありがとうございます!
hectopascal1013

2018/09/23 02:20

>spookybird様 毎回的確なお答えありがとうございます! 色々と検証といいますか、自分なりにいじって勉強してみている所なんですが、 甘えついでにもう一つ今回の件で質問してもよろしいでしょうか? 頂いたスクリプトですと、 <form id="fm"></form> <script> の順でないと読み込みの順序の問題でクリエイトできないのはわかりました。 これってヘッダーの中のリンクで入れても同じでしょうかね?やってみた所ブラウザによって結果が一定してないような? 前にそれを解決するためのスクリプトとかもネット上で見かけたのですが、 そうした事って必要でしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問