Multiple var inside onclick: Strings and Int

Question

Currently I have this code

function myFunction(arr)
{
 var out = "<br />";
 var i;

 if(arr.length > 0)
 {
  for(i = 0; i < arr.length; i++)
  {
   out += "<div class='address container-fluid card svs-map-add' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
  }
  document.getElementById('results').innerHTML = out;
 }
 else
 {
  document.getElementById('results').innerHTML = "Sorry, no results...";
 }

}

As you can see here I'm passing 2 variables and it contains latitude and longitude

onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'

These variables will go to function chooseAddr

Currently it's working fine

But now I need to include 1 more variable and it's

arr[i].display_name

Uncaught SyntaxError: Unexpected end of input

What I have done right now is

  onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ", \'" + arr[i].display_name + "\');return false;'

But there's an error with that syntax

How can I pass the display_name variable since this variable is String

you will have add the variable you want in the array composition — Greedo
– Greedo, Commented Oct 11, 2019 at 9:29
onclick='chooseAddr(" + arr[i].lat, you are missing a single quote after the double quote, and the same to the rest of the concatenation. You used single quote to start the string, then every time you concatenate something, it must end also with a single quote. Plus you didn't tell us the error — Carl Binalla
– Carl Binalla, Commented Oct 11, 2019 at 9:29

Andy · Accepted Answer · 2019-10-11 09:53:35Z

If you take a look at some of the questions on SO re inline JS one of the most common problems is how quotes/escaping quotes is meant to work when you add variables into the mix. Rather than explain where the problem is here's a more modern solution to your problem.

The idea is that you separate out your JS from your HTML and use data attributes to contain the element-specific data. Further, you add an event listener to a parent element to catch clicks and call your chooseAddr function to process the data of the clicked element.

const arr = [{ lat: 1, lng: 1, display_name: "Rita" }, { lat: 2, lng: 2, display_name: "Sue" }, { lat: 3, lng: 3, display_name: "Bob" }];

// We create some HTML by using `map` to iterate over the array
// and return a string (we're using a template literal here for convenience)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
// We add the lat/lng data as data attributes on the div.
const html = arr.map((el) => {
  return `
    <div data-lat="${el.lat}" data-lng="${el.lng}" class="address container-fluid card svs-map-add" title="Show Location and Coordinates">
      ${el.display_name}
    </div>
  `;

// `map` returns an array so don't forget to `join` it up into a string
}).join('');

// We've created a parent element called "wrapper", so we need
// a) to pick it up
const wrapper = document.querySelector('.wrapper')

// b) add the HTML inside it
wrapper.insertAdjacentHTML('beforeend', html);

// c) add a listener to it to listen for clicks (that bubble
// up the DOM) and call `chooseAddr`
wrapper.addEventListener('click', chooseAddr, false);

function chooseAddr(e) {

  // Destructure the lat/lng data from the dataset of
  // the target (the element that was clicked)
  const { target: { dataset: { lat, lng } } } = e;
  console.log(lat, lng);
}

<div class="wrapper" />

I appreciate this is a lot to take in but if you use a separation of concerns with your code you'll find it a lot easier to manage. I hope this helps.

Comments

gmaslic · Accepted Answer · 2019-10-11 09:45:12Z

1

You can add strings in better way using backticks and ${};

Example:

var myString = `Some text ${someVariable}`

Here is codepen with you sample: codepen

answered Oct 11, 2019 at 9:45

gmaslic

545 bronze badges

Comments

Vishal modi · Accepted Answer · 2019-10-11 09:49:42Z

1

You can pass it as a seprate parameter

<input type="button" value="test" onclick='chooseAddr( param1 + ", " + param2,  "param3" );return false;'/>

// or pass in array
<input type="button" value="test" onclick='chooseAddr1( "param1" + ", " + "param2" + ", test" );return false;'/>

Now you need to handle it in your script

 function chooseAddr(arr,data) {
// do your code
}
function chooseAddr1(arr) {
// do your code
}

edited Oct 11, 2019 at 9:49

answered Oct 11, 2019 at 9:41

Vishal modi

1,7202 gold badges13 silver badges22 bronze badges

Collectives™ on Stack Overflow

Multiple var inside onclick: Strings and Int

4 Answers 4

Further reading

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Further reading

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related