javascript - How to pass objects in parameters in onclick() event? - Stack Overflow

admin管理员组

文章数量:1357405

I have this function:

function createMarkersForPlaces(places, infowindow) {
  for (var i = 0; i < places.length; i++) {
    var place = places[i];
    var marker = new google.maps.Marker({
      map: map,
      title: place.name,
      position: place.geometry.location,
      id: place.place_id,
      animation: google.maps.Animation.DROP
    });
    placeMarkers.push(marker);
    // if user clicks one of the marker, execute getPlaceDetails
    // for that specific place
    marker.addListener('click', function() {
      if (infowindow.marker == this) {
      } else {
        getPlacesDetails(this, infowindow);
      }
    });
    // based on the places above, populate list in html
    $("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");
  }
}

but this line of code does not work.

$("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");

inside of a function where marker and infowindow are defined, and other than this line of code, the function works perfect. Marker is an object from google.maps.marker, and infowindow is an object from google.maps.InfoWindow. How can I make it work?

function getPlacesDetails(marker, infowindow) {some function...}

I have this function:

function createMarkersForPlaces(places, infowindow) {
  for (var i = 0; i < places.length; i++) {
    var place = places[i];
    var marker = new google.maps.Marker({
      map: map,
      title: place.name,
      position: place.geometry.location,
      id: place.place_id,
      animation: google.maps.Animation.DROP
    });
    placeMarkers.push(marker);
    // if user clicks one of the marker, execute getPlaceDetails
    // for that specific place
    marker.addListener('click', function() {
      if (infowindow.marker == this) {
      } else {
        getPlacesDetails(this, infowindow);
      }
    });
    // based on the places above, populate list in html
    $("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");
  }
}

but this line of code does not work.

$("ul").append("<li><a href='#' onclick='getPlacesDetails(" + marker + "," + infowindow ")' class='w3-bar-item'>" + place.name + "</a></li>");

inside of a function where marker and infowindow are defined, and other than this line of code, the function works perfect. Marker is an object from google.maps.marker, and infowindow is an object from google.maps.InfoWindow. How can I make it work?

function getPlacesDetails(marker, infowindow) {some function...}

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Nov 8, 2017 at 23:17 Nicholas Huh asked Nov 8, 2017 at 23:03 Nicholas HuhNicholas Huh 8511 gold badge22 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

marker is an object, so you won't be able to convert it to a string to be put into the onclick attribute, and it's outside of the window scope, so you won't be able to do it directly in the onclick attribute anyways. I would probably do it like this:

var $li = $("<li><a href='#' class='w3-bar-item'>" + place.name + "</a></li>");
$("ul").append($li);
$li.on('click', getPlacesDetails.bind(this, marker, infowindow));

First, your concatenation is wrong. You need to concatenate the variable into the string by terminating the string, concatenating the variable and then adding another string. Don't forget + between every concatenation:

onclick='getPlacesDetails("' + marker + '","' + infowindow + '")'

Second, all this will do is concatenate the entire object into your string, not some actual usable string property of that object.

Now, you should not use inline HTML event attributes for event binding. That was how we did it 100 years ago and there are many reasons not to do it. Instead, do all your event binding in script. This will also allow you to avoid the concatenation pletely.

Lastly, don't use a hyperlink if you aren't actually navigating anywhere. It's semantically incorrect and you have to disable the native click behavior of the link, not to mention that it can cause problems with the browser's history. Just about any visible element can be clicked, so just bind click to the li and forget the a pletely:

var li = document.createElement("li");    // Create the element in memory
li.classList.add("w3-bar-item");          // Configure the CSS

// Set up the click event to an anonymous function that calls the
// actual function you want and passes the parameters it needs:
li.addEventListener("click", function(){ 
   getPlacesDetails(marker, infowindow)
});

本文标签： javascriptHow to pass objects in parameters in onclick() eventStack Overflow