[英]Call a JavaScript function with parameters when click on href
I am trying to come up with code that would create an href tag with a JavaScript functions which gets parameters. 我正在尝试拿出代码,该代码将使用具有参数的JavaScript函数来创建href标签。 Parameters are a string and an object converted into a json string.
参数是一个字符串和一个转换为json字符串的对象。 My attempt was something like this:
我的尝试是这样的:
return '<a style="text-decoration:underline;cursor:pointer" target="_blank"' +
' href="javascript:goToStateNewWindow(\'trending\', \'' + JSON.stringify(params) + '\')">' + value + '</a>';
The error was: 错误是:
Uncaught SyntaxError: Invalid or unexpected token
未捕获的SyntaxError:无效或意外的令牌
In Inspect window it looked like this: 在“检查”窗口中,它看起来像这样:
<a style="text-decoration:underline;cursor:pointer" target="_blank" href="javascript:goToStateNewWindow('trending', '{" projectid":2313,"alarmsonly":"true"}')"="">test</a>
Can someone please explain what I am doing wrong? 有人可以解释我做错了吗?
Can someone please explain what I am doing wrong?
有人可以解释我做错了吗?
Sorry. 抱歉。 But everything.
但是一切。 Here's how you should create the element, eg in a function.
这是您应该如何在例如函数中创建元素的方法。
var a = document.createElement('a');
var t = document.createTextNode(value);
a.appendChild(t);
a.style.textDecoration = 'underline';
a.style.cursor = 'pointer';
a.setAttribute("target", "_blank");
document.body.appendChild(a); // or any other element you want the a to appear in
a.addEventListener("click", function(e) {
e.preventDefault();
goToStateNewWindow('trending', params);
});
Note that you could also style the element with css before... 请注意,您还可以在元素之前使用CSS设置样式。
Firstly, it shouldn't be an <a>
element, but a <button>
. 首先,它不应该是
<a>
元素,而应该是<button>
。 You can use CSS to make it look like <a>
if you want. 如果需要,可以使用CSS使它看起来像
<a>
。
Secondly, you should rather create en element using document.createElement()
, add the attributes and specify a click event listener using the addEventListener()
method. 其次,您应该使用
document.createElement()
创建en元素,添加属性并使用addEventListener()
方法指定单击事件侦听器。
const element = document.createElement('button')
element.setAttribute('type', 'button')
element.setAttribute('style', 'text-decoration:underline;cursor:pointer;')
element.setAttribute('target', '_blank')
element.addEventListener('click', event => goToStateNewWindow('trending', params))
element.innerHTML = value
return element.outerHTML
I want to explain why it doesn't work. 我想解释一下为什么它不起作用。 It's because in your html you have
href="javascript:...
when you call JSON.stringify(params)
it returns {"projectid":2313,"alarmsonly":true}
then the javascript parser stops at the first double quote after href="
( {"
) and the rest ( projectid":2313,"alarmsonly":true}...
) become invalid javascript. 这是因为在您的html中,您有
href="javascript:...
当您调用JSON.stringify(params)
它返回{"projectid":2313,"alarmsonly":true}
然后javascript解析器会在之后的第一个双引号处停止href="
( {"
)和其余的( projectid":2313,"alarmsonly":true}...
)成为无效的javascript。
I made a function who replace double quotes with single quotes and that worked. 我做了一个函数,用双引号替换了双引号,并且有效。 May not work if the object have a string value with double quotes.
如果对象具有带双引号的字符串值,则可能不起作用。
function goToStateNewWindow(route, body){ console.log('Route: ', route); console.log('Params: ', body); } function doublequotetosingle(obj) { return JSON.stringify(obj).replace(/"/g, "'");; } function test(params, value) { return '<a style="text-decoration:underline;cursor:pointer" target="_blank"' + ' href="javascript:goToStateNewWindow(\\'trending\\',' + doublequotetosingle(params) + ')">' + value + '</a>'; } document.body.insertAdjacentHTML('beforeend', test({ projectid: 2313, alarmsonly: true }, 'test'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.