javascriptの関数でオブジェクトを引数とする方法

Question

###実装したいこと

var data = {
  a:1,
  b:2,
}

var a ='<a href="#" onclick = "testFunction('+data+') ; return false;">click</a>';

function testFunction(data){
        document.getElementById('aaa').textContent = data.a;
        document.getElementById('bbb').textContent = data.b;
}

としたいのですが、オブジェクトを引数にすることができません。

エラー：Uncaught SyntaxError: Unexpected identifier

javascriptはオブジェクトを引数とできると思ってやったのですが、うまくいきません。

何か方法がありましたらご教授願います。

Answer 1

実際に生成されたHTMLを見てください。
aタグが以下のようになっていると思います。

<a href="#" onclick="testFunction([object Object]) ; return false;">click</a>

dataの"中身"を渡したいのであれば、以下のようにする必要があります。

var a ='<a href="#" onclick = "testFunction({';
var aa = '}) ; return false;">click</a>';
for(key in data){
	a += key + ":" + data[key] + ",";
}
a += aa;

この場合、HTMLには以下のように出力されます

<a href="#" onclick="testFunction({a:1,b:2,}) ; return false;">click</a>

Comments

[退会済みユーザー]

回答ありがとうございます。
無事やりたいことができました。

Answer 2

data は文字列と連結した時点で String 型に変換される為、期待通りに動作しません。
data がグローバル変数であるならば、data も文字列として埋め込む事で期待通りに動作すると思われます。

var a ='<a href="#" onclick = "testFunction(data) ; return false;">click</a>';

ただし、リンクではないのにa要素を使っていたり、testFunction をグローバルスコープに盛っていたり、良い実装ではない部分も見受けられ宇野で設計から変えた方がスマートだとは思います。

<p id="aaa"></p>
<p id="bbb"></p>

<script>
'use strict';
(function () {
  function handleClick (event) {
    var doc = event.target.ownerDocument;

    doc.getElementById('aaa').textContent = this.a;
    doc.getElementById('bbb').textContent = this.b;
  }

  function main () {
    var doc = document,
        p = doc.createElement('p'),
        afterNode = doc.getElementById('aaa'),
        data = {a: 1, b: 2};

    p.textContent = 'Click Me!';
    data.handleEvent = handleClick;
    p.addEventListener('click', data, false);
    afterNode.parentNode.insertBefore(p, afterNode);
  }

  main();
}());
</script>

Re: miyazaki さん

Comments

[退会済みユーザー]

回答ありがとうございます。
もう一度設計を見直してみます。

[think49]

コードを追記しました