javascript 使用innerHTML将动态参数传递给JavaScript函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11321914/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing dynamic parameter to a JavaScript function using innerHTML
提问by Coder
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 namevariable 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
谢谢
采纳答案by Coder
I simply used onclick="closeTab(name);"> in innerHTML and it worked. I guess that worked coz name is global variable.
我只是在 innerHTML 中使用了 onclick="closeTab(name);"> 并且它起作用了。我猜那个有效的因为名称是全局变量。
回答by Niet the Dark Absol
Your resulting code is:
您生成的代码是：
<button ... onclick="closeTab(test);">Return</button>
Can you see what's wrong? testis being treated as a variable, when you actually intended it to be a string.
你能看出有什么问题吗？test被视为变量，而您实际上希望它是一个字符串。
I like to use JSON.stringifyto make a variable parseable (kind of like var_exportin PHP), but in this case you also need to escape quotes. So:
我喜欢用来JSON.stringify使变量可解析（有点像var_export在 PHP 中），但在这种情况下，您还需要转义引号。所以：
JSON.stringify(test).replace(/"/g,""")
Use that in your button instead of just test.
在您的按钮中使用它，而不仅仅是test.
回答by RobB
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>';
回答by Alvin Wong
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 innerHTMLas it is messy, and can sometime be slow.
我真的不鼓励过度使用，innerHTML因为它很乱，而且有时会很慢。
回答by Arindam Roy
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 不是像上面每个人建议的那样正确的方法。
