javascript - このjs関数の何が問題になっていますか?

Question

これが私のスクリプトの一部です：

function create(panel_id,iframe_source,handle_title) {
 var temp1=document.createElement("a");
 temp1.setAttribute("href","#");
 var attr=document.createAttribute("onClick");
 attr.nodeValue="showPanel(panel_id)";
 temp1.setAttributeNode(attr);
 temp1.className="controller";
 temp1.innerHTML=handle_title;
 div.appendChild(temp1);
}
function showPanel(panel_id) {
 var elem = document.getElementById(panel_id);
 elem.classList.toggle("show");
}

そして、これが最初の関数を呼び出す部分です。

<a href="#" onClick="create('test','http://example.com','example')">create</a>

私がそれを呼び出すと、すべての要素が正しく作成され、onClick 属性を除いて機能します。関数を次のように変更すると、次のようになります。

...
attr.nodeValue="showPanel('test')";
...

すべてが正常に動作しています..誰かが私が間違ったことを教えてもらえますか?

Answer 1

変化する：

attr.nodeValue="showPanel(panel_id)";

に：

attr.nodeValue="showPanel('" + panel_id + "')";

Answer 2

2つの問題があります

1) onClick は onclick である必要があります

2)"showPanel(panel_id)";あるべき

"showPanel('" + panel_id + "')";

これを試して

function create(panel_id,iframe_source,handle_title) {
 var temp1=document.createElement("a");
 temp1.setAttribute("href","#");
 var attr=document.createAttribute("onclick");
 attr.nodeValue="showPanel('" + panel_id + "')";
 temp1.setAttributeNode(attr);
 temp1.className="controller";
 temp1.innerHTML=handle_title;
 div.appendChild(temp1);
}
function showPanel(panel_id) {
 var elem = document.getElementById(panel_id);
 elem.classList.toggle("show");
}