将变量连接到 javaScript 中的 html 字符串

Question

Please be gentle with me, it is my first time uploading a question to stack overflow, and since I am rather new in programming I might be a bit vague in the terms;-)

My problem is that I have a function which places some markers on a map, this happens automatically when I load the site, these markers are different and contain different "trophies", that I have placed in a pop-up locked to the marker. However I want the program to be able to collect the trophies, therefore I would like to call a function with the specific trophy as my parameter in my javaScript file, when I click a button in my pop up.HTML.

So far it looks like this:

    function createMarker(coords,trophy) {
      var id
      // check if array is empty and set id to 0 if it is
      if (markers.length < 1) id = 0
      // else make id based on array length
      else id = markers[markers.length - 1]._id + 1
      // custom popup content with HTML that can be styled
      var popupContent =
      '<div id= "divTrophy">'+
      '<img src=' + trophy +'></img>' +
      '<button onClick="trophyCollection('+trophy+')">Collect trophy</button>'+
      '<button onclick="closePopUp()">Close pop up</button>'+
      '</div>'

 '<button onClick="trophyCollection('+trophy+')">Collect trophy</button>'+

The problem is in this line where I am for some reason not allowed to concat this way, which confuses me because it works fine in the line above in the <img> .

I really hope someone can help me, create my little treasure hunt around DK.

Amalie

Answer 1

Try using string interpolation. Something like this.

`your_html_string ${your_dynamic_value} your_html_string`

You can find more info on interpolation here. How to interpolate variables in strings in JavaScript, without concatenation?

Answer 2

Try escaping them it should work, example

'<button onClick="trophyCollection(\''+trophy+'\')">Collect trophy</button>'+

Answer 3

As suggested you can try template literals :

var popupContent = `<div id="divTrophy">
   <img src="${trophy}"/>
   <button onClick="trophyCollection('${trophy}')">Collect trophy</button>
   <button onclick="closePopUp()">Close pop up</button>
</div>`

Do note that as trophy is a string you still need to wrap it in quotes.

Answer 4

You can insert your entire HTML inside of a backtick string and interpolate values like this:

let popupContent =
  `<div id= "divTrophy">
    <img src=${trophy}></img>
    <button onClick="trophyCollection(${trophy})">Collect trophy</button>
    <button onclick="closePopUp()">Close pop up</button>
  </div>`