Javascript Javascript在href onclick请求中传递变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7850066/
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
Javascript pass variable in href onclick request
提问by pm13
I know this is really basic javascript but for some reason, I can't seem to get my link's onclick function to work when passing a parameter.
我知道这确实是基本的 javascript，但由于某种原因，我似乎无法在传递参数时让我的链接的 onclick 函数工作。
I have tried escaping the quotes, adding different types of quotes and adding the raw variable as a string.
我尝试转义引号，添加不同类型的引号并将原始变量添加为字符串。
I have it working with the below but it says that "XYZ is undefined"
我有它与下面的工作，但它说“XYZ未定义”
function renderLink(value, meta, record)
{
var type = record.data['name']; //value is XYZ
return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';
}
function getReport(type){
alert(type);
}
回答by Joe
return '<a href="javascript:void(0);" onclick="getReport('+type+'); return false;"></a>';
You need to escape the string:
您需要转义字符串：
return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
回答by T.J. Crowder
If you look at the rendered HTML, you'll see the problem: Your getReportcall looks like this:
如果您查看呈现的 HTML，您会看到问题：您的getReport调用如下所示：
getReport(XYZ);
I'm guessing you want quotes around that, so:
我猜你想要引号，所以：
return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
...which renders:
...呈现：
getReport('XYZ');
Somewhat more esoteric, but when you output an onclickattribute as part of HTML source, it is of course an HTML attribute, which means you can use character entities. So you coulduse the "entity:
有点深奥，但是当您将onclick属性作为 HTML 源的一部分输出时，它当然是一个 HTML 属性，这意味着您可以使用字符实体。所以你可以使用"实体：
return '<a href="javascript:void(0);" onclick="getReport("'+type+'"); return false;"></a>';
I point this out not because I recommend it (I don't), but because it's useful to remember what's really going on in an onclickattribute. This is one of the reasons I would strongly recommend using a proper event handler (e.g., via addEventListener/ attachEvent, or even just assigning to the aelement's onclickproperty once it's been instantiated) instead.
我指出这一点不是因为我推荐它（我不推荐），而是因为记住onclick属性中真正发生的事情很有用。这是我强烈建议使用适当的事件处理程序的原因之一（例如，通过addEventListener/ attachEvent，或者甚至只是在实例化后分配给a元素的onclick属性）。
It's important to note that this way of doing it is also very sensitive to the contentof record.data['name']. For instance, consider what happens if instead of XYZit's Tom's. The output of the first option above would be
需要注意的是这样做的这种方式也是非常敏感的是很重要的内容的record.data['name']。例如，考虑如果而不是XYZ它会发生什么Tom's。上面第一个选项的输出将是
getReport('Tom's');
...which is obviously a problem. Similarly, if there's a backslash in the text, it will be treated as an escape character on the result, etc., etc. — a bit of a minefield.
……这显然是一个问题。同样，如果文本中有反斜杠，它将被视为结果中的转义字符，等等——有点雷区。
If you can possibly change your renderLinkso it returns an actual instantiated aelement rather than a string, that's what I'd do:
如果你可以改变你的renderLink所以它返回一个实际的实例化a元素而不是一个字符串，这就是我要做的：
function createLink(value, meta, record)
{
var type = record.data['name']; // Grab value as of when we were called
var link = document.createElement('a');
link.href = "javascript:void(0);";
link.onclick = function() { // Or even better, addEventListener / attachEvent
getReport(type);
return false;
};
return link;
}
That creates the link and a closurethat accesses typewithout turning it into text and back again. (Don't worry if you're unfamiliar with closures, closures are not complicated.)
这将创建链接和一个闭包，type无需将其转换为文本并再次返回即可访问。（如果您不熟悉闭包，请不要担心，闭包并不复杂。）
回答by mck89
getReport receives XYZ as a variable not as a string, you need to put that inside quotes:
getReport 接收 XYZ 作为变量而不是字符串，您需要将其放在引号内：
return '<a href="javascript:void(0);" onclick="getReport(\''+type+'\'); return false;"></a>';
