[英]Passing dynamic parameter to a JavaScript function using innerHTML
I am having issues passing a dynamic parameter to a JavaScript function using innerHTML. 我在使用innerHTML将动态参数传递给JavaScript函数时遇到问题。
Included below is the current code that I am using: 下面包括的是我正在使用的当前代码:
var name = "test";
frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
onclick="closeTab('+name+');">Return</button>';
When I debug the code of the closeTab()
function, the parameter specified by the name
variable is null
. 当我调试
closeTab()
函数的代码时,由name
变量指定的参数为null
。
I believe there is a problem with the declaration of the value while modifying the innerHTML property. 我相信修改innerHTML属性时值的声明存在问题。
Any help would be greatly appreciated. 任何帮助将不胜感激。
Thanks 谢谢
Your resulting code is: 您得到的代码是:
<button ... onclick="closeTab(test);">Return</button>
Can you see what's wrong? 你看到什么问题了吗?
test
is being treated as a variable, when you actually intended it to be a string. 当您实际上将
test
作为字符串时,它被视为一个变量。
I like to use JSON.stringify
to make a variable parseable (kind of like var_export
in PHP), but in this case you also need to escape quotes. 我喜欢使用
JSON.stringify
使变量可解析(类似于PHP中的var_export
),但是在这种情况下,您还需要转义引号。 So: 所以:
JSON.stringify(test).replace(/"/g,""")
Use that in your button instead of just test
. 在按钮中使用它,而不只是
test
。
Your dynamic declaration is passing the parameter as a variable, instead of the value of the parameter. 您的动态声明将参数作为变量而不是参数的值传递。 In order to correct this issue, you must pass the value as a string, instead of a variable, which is accomplished by encasing and escaping the variable in single quotes as demonstrated below:
为了纠正此问题,您必须将值作为字符串而不是变量传递,这可以通过将变量用单引号引起来并转义,如下所示:
var name = "test";
frm.innerHtml = '<button name="close" id="close" title="Cancel" type="button"
onclick="closeTab(\''+name+'\');">Return</button>';
Using DOM: 使用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);
I really don't encourage overusing innerHTML
as it is messy, and can sometime be slow. 我真的不鼓励过度使用
innerHTML
因为它很乱,有时会很慢。
Assuming your html is - 假设您的html是-
<form id='frm'>
</form>
Your JS should be - 您的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+"');");
Check this out - http://jsfiddle.net/arindam006/avgHz/1/ 检查一下-http://jsfiddle.net/arindam006/avgHz/1/
This is the cleanest way to achieve this, though innerHtml is not a proper way to do it as everyone suggested above. 这是实现此目的的最干净的方法,尽管如上所述,innerHtml并不是正确的方法。
I simply used onclick="closeTab(name);"> in innerHTML and it worked. 我只是在innerHTML中使用了onclick =“ closeTab(name);”>,但它确实有效。 I guess that worked coz name is global variable.
我猜工作的COZ名称是全局变量。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.