Call a JavaScript function with parameters when click on href

Question

I am trying to come up with code that would create an href tag with a JavaScript functions which gets parameters. Parameters are a string and an object converted into a json string. 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

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?

Answer 1

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...

Answer 2

Firstly, it shouldn't be an <a> element, but a <button> . You can use CSS to make it look like <a> if you want.

Secondly, you should rather create en element using document.createElement() , add the attributes and specify a click event listener using the addEventListener() method.

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

Answer 3

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.

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'));