How can I send two parameters with a HTML onclick event?

Question

I have this event that sends the ID parameter to a function that generates a URL, but I want to send two parameters instead of just the ID. I'd like to send the name also.

With this code I can only send one parameter, but I need to send two.
Based on this other post where one parameter is passed, I tried the following:

 '<li id="link4"><a href="#" onclick="generateURL(\'' + jsonObject.id + '\');">Line</a></li>'

This is the method that generates my URL

function generateURL(id, name)
{
    window.location.href = 'https://www.example'+ id + name + '.com';
 }

In other words I'm trying to imitate this:

<a href="#" onclick="generateURL(jsonObject.id, jsonObject.name)></a>

And if I try this:

'<li id="link4"><a href="#" onclick="generateURL(\'' + jsonObject.id + ',' + jsonObject.name + '\');">Line Name</a></li>'

This happens:

Answer 1

The two arguments are being strung together into one single string literal - so if you inspect that element or find it in the source, it should look like below:

<a href="#" onclick="generateURL('1337,testName');">Line Name</a> 

One solution is to add escaped single-quotes (ie \\' ) before and after the comma:

'<li id="link4"><a href="#" onclick="generateURL(\'' + jsonObject.id + '\',\'' + jsonObject.name + '\');">Line Name</a></li>';

Observe the difference between the link in the 1 ^st list and the link in the 2 ^nd list in the example below:

 var jsonObject = { name: 'testName', id: 1337 }; document.addEventListener('DOMContentLoaded', function() { var liHTML = '<li id="link4"><a href="#" onclick="generateURL(\\'' + jsonObject.id + ',' + jsonObject.name + '\\');">Line Name</a></li>'; document.getElementById('theList').innerHTML = liHTML; liHTML = '<li id="link5"><a href="#" onclick="generateURL(\\'' + jsonObject.id + '\\',\\'' + jsonObject.name + '\\');">Line Name</a></li>'; document.getElementById('theOtherList').innerHTML = liHTML; }); function generateURL(id, name) { console.log('generateURL() - id: ', id, 'name: ', name); }

 1<sup>st</sup>List: <ul id="theList"></ul> 2<sup>nd</sup>List: <ul id="theOtherList"></ul>

Answer 2

You're passing in one continuous string as the first argument, id , into generateURL(id, name), instead of passing two individual arguments, id and name . In other words, these are the arguments you use:

id: \\'' + jsonObject.ln_org_code + ',' + jsonObject.ln_name + '\\'

name: (hence why name is undefined in your screenshot)

To fix this, simply remove the quotes from the comma between your two arguments. This comma separates id and name , and will register jsonObject.ln_org_code as the id and jsonObject.ln_name as the name. Additionally, be careful with the tick mark placement on your first forward slash. Personally, I would not concatenate the strings until the function call.

In other words, here is how your function call should look.

<li id="link4"><a href="#" onclick="generateURL(('\\' + jsonObject.ln_org_code), (jsonObject.ln_name + '\\'));">Arranque de Linea</a></li>

Answer 3

remove the quotes from the comma between your two arguments. This comma separates id and name, and will register jsonObject.ln_org_code as the id and jsonObject.ln_name as the name. Additionally, be careful with the tick mark placement on your first forward slash. Personally, I would not concatenate the strings until the function call.

Here is how your function call should look.

<li id="link4"><a href="#" onclick="generateURL(('\' + jsonObject.ln_org_code), (jsonObject.ln_name + '\'));">Arranque de Linea</a></li>