CODEWITHSUNDEEP
javascript
King RG
King RG

Reputation: 510

Multiple var inside onclick: Strings and Int

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

Upvotes: 0

Views: 79

Answers (4)

Elancheziyan G
Elancheziyan G

Reputation: 71

out += "<div class='address container-fluid card svs-map-add' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ",\""+arr[i].display_name+"\");return false;'>"+arr[i].display_name+"</div>"

This should work

Upvotes: 1

Andy
Andy

Reputation: 63524

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.

Further reading

Upvotes: 2

Vishal modi
Vishal modi

Reputation: 1720

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
}

Upvotes: 1

gmaslic
gmaslic

Reputation: 54

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

Example: 

var myString = `Some text ${someVariable}`

Here is codepen with you sample: codepen

Upvotes: 1

Related Questions