Q&A
body.setAttribute("onclick","display_b(" + m + ");");
のようなコードは皆さんがおっしゃっているように、あまりよくありません。
実行可能なコードを文字列として作成するときは、細心の注意を払ってやらないとセキュリティ的な穴になることがあるからです。そういう場合は他の実現手段を探してください。
●やりたい事
1.start関数にて配列nの0番目の要素[1,0]を、display_a関数に代入。
2.display_a関数にて、onclickを追加しクリックを押すと、上記1により代入された要素[1,0]をdisplay_b関数に代入。
●質問内容
上記2にて要素[1,0]が代入されているか確認したところ、console.log結果が1になりました。
上記1の時点ではconsole.log結果が[1,0]でしたが、どの時点で変わったのでしょうか？
また、display_b関数に[1,0]を代入するには何処を修正すれば良いのでしょうか？
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> </head> <body> <div id="test"></div> <script> const n =[[1,0],[2,1],[2,2]]; start(); function start(){ const m =n[0]; display_a(m); } function display_a(m){ console.log(m); //[1,0] const result = document.getElementById("test"); const body = document.createElement("span"); body.setAttribute("id","add"); body.setAttribute("onclick","display_b(" + m + ");"); result.appendChild(body); document.getElementById("add").innerHTML = "クリック"; } function display_b(m) { console.log(m); //1 } </script> </body> </html>
回答4件
0
ベストアンサー
javascript
1body.setAttribute("onclick","display_b(" + m + ");");
ここでmは文字列化されて1,0という値になってしまいます。結果、display_b(1,0)というイベントの設定となります。
そもそも、onclickを、しかも文字列として設定することが、現代JavaScriptでは適当ではありません。addEventListenerなどを使って、関数そのものをイベントとして登録させるようにしましょう。
投稿2019/11/26 02:57
総合スコア145963
最後の１文は同感です。質問者さんには MDN の記事 https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events の一読をオススメしたい。
0
setAttributeでonclickを付加するのはどうかと思いますが
javascript
1body.setAttribute("onclick","display_b(" + m + ");"); 2↓↓↓ 3body.setAttribute("onclick","display_b(" + JSON.stringify(m) + ");");
投稿2019/11/26 02:55
総合スコア116661
0
上記1により代入された要素[1,0]をdisplay_b関数に代入。
body.setAttribute("onclick","display_b(" + m + ");"); を、次のように書き換えてみてください。
javascript
1body.addEventListener("click",function (event) { 2 // m は display_a() の引数を参照していて、そのままそっくり渡す形の関数が書ける。 3 display_b( m ); 4});
MDNにも関連ページがあります。
投稿2019/11/28 09:26
総合スコア5434
0
display_b(1,0);になるので、function display_b(m,n)のようにして受け取る必要があります。
投稿2019/11/26 02:57
総合スコア69596
あなたの回答
tips
プレビュー
