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

问题

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:

回答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 (i.e. \') 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>

回答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>

回答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>

来源：https://stackoverflow.com/questions/43074876/how-can-i-send-two-parameters-with-a-html-onclick-event

标签

javascript

html

dom-events