Question

我遇到使用innerHTML将动态参数传递给JavaScript函数的问题。

下面是我正在使用的当前代码：

var name = "test";

frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
     onclick="closeTab('+name+');">Return</button>';

当我调试closeTab()函数的代码时，name变量指定的参数为null。

我认为在修改innerHTML属性时声明值存在问题。

非常感谢任何帮助。

由于

Answer 1

您的结果代码是：

<button ... onclick="closeTab(test);">Return</button>

你能看出什么是错的吗？当你真正想要它是一个字符串时，test被视为一个变量。

我喜欢使用JSON.stringify来创建一个可解析的变量（类似于PHP中的var_export），但在这种情况下，您还需要转义引号。所以：

JSON.stringify(test).replace(/"/g,"&quot;")

在按钮中使用它而不只是test。

Answer 2

您的动态声明将参数作为变量传递，而不是参数的值。为了纠正这个问题，你必须将值作为字符串而不是变量传递，这是通过用单引号括起和转义变量来实现的，如下所示：

var name = "test";

frm.innerHtml = '<button name="close"  id="close"  title="Cancel" type="button"
      onclick="closeTab(\''+name+'\');">Return</button>';

Answer 3

使用DOM：

var name="test";
var el = document.createElement("button");
el.name = "close";
el.id = "close";
el.title = "Cancel";
el.type = "button";
el.onclick = function() {  // an inline function that will be executed when el is clicked
    closeTab(name);        // `name` here contains `"test"`
};
frm.appendChild(el);

我真的不鼓励过度使用innerHTML，因为它很乱，而且有时会很慢。

Answer 4

假设您的HTML是 -

<form id='frm'>

</form>

你的JS应该是 -

var name = "test";
var innerHtml = "<button name='close' id='close' title='Cancel'   type='button'>Return</button>";
$("#frm").html(innerHtml);
$("#close").attr("onclick","javascript:closeTab('"+name+"');");

检查一下 - http://jsfiddle.net/arindam006/avgHz/1/

这是实现这一目标最干净的方法，尽管innerHtml并不像上面提到的那样适当。

Answer 5

我只是使用onclick =“closeTab（name）;”＆gt;在innerHTML中它起作用了。我想这工作的coz名称是全局变量。

使用innerHTML将动态参数传递给JavaScript函数

5 个答案: