1

I have a link that is currently a string. It looks like this:

"<h2>New Test</h2><br><a href='/map/create-new?lat=35.7&lng=-83.55'>Create</a>"

The above works, but when I try to insert variables into the spot where 35.7 and -83.55 are then I end up breaking the link and it doesn't work.

I tried like this:

"<h2>New Launch</h2><br><a href='/map/create-new?lat='+ event.latlng.lat + '&lng='  + event.latlng.lng'>Create</a>"

The variables are event.latlng.lat and event.latlng.lng.

When I try it like this, then the href ends up only being translated to: map/create-new?lat= so I know that something is wrong with my placement of quotes but I'm just not seeing the issue.

EDIT: just for clarification, it must be a string like I have. I am passing this into a component that I did not make and this is how it works.

mcool
  • 457
  • 4
  • 29
  • I think this is the answer you are looking for. https://stackoverflow.com/questions/17734343/how-to-insert-javascript-variables-into-a-url – akm elias Aug 27 '22 at 14:01

4 Answers4

0

By using the right quotes:

var a = 1;
var b = 2;
var mylink = "http://website.com/page.aspx?list=" + a + "&sublist=" + b;

If you start a string with doublequotes, it can be ended with doublequotes and can contain singlequotes, same goes for the other way around.

This answer was found to this question. How to insert javascript variables into a URL

best way to use variables within quotes is like this.

<a href=`/map/create-new?lat= ${event.latlng.lat} &lng=${event.latlng.lng}`>
akm elias
  • 143
  • 6
  • The problem though is the link is already surrounded by double quotes. In your example, the double quotes aren’t there so will that still work as expected? The criteria is to have quotes around the whole thing and then insert variables inside – mcool Aug 27 '22 at 14:40
  • It should work. ``"

    New Launch


    Create"``     – akm elias Aug 27 '22 at 15:11
0

You can not add or use variables directly in your markup (html) but you can solve it and get desired results by using javascript (code below):

const customLink = document.getElementById("customLink");

var1 = 35.7;
var2 = -83.55;
customLink.href = "/map/create-new?lat="+var1+"&lng="+var2;
<h2>New Test</h2><br><a id="customLink" href=''>Create</a>
Satyam Nagar
  • 58
  • 6
0

Use variables like this within a string. 

<a href=`/map/create-new?lat= ${event.latlng.lat} &lng=${event.latlng.lng}`>
akm elias
  • 143
  • 6
  • Will this still work if my HTML is already surrounded by quotes? – mcool Aug 27 '22 at 14:35
  • It should work. ``"

    New Launch


    Create"``     – akm elias Aug 27 '22 at 15:14
  • I’ll give this a shot when I get home so I can accept your answer. That should be the solution though. Thanks! – mcool Aug 27 '22 at 15:32
  • So it for some reason didn't work. When I click the link it navigates me to here: `http://127.0.0.1:5173/%60/map/create-new?lat=${` – mcool Aug 27 '22 at 16:54
  • So it is working right, but your link is not correct. It is getting localhost because you didn't add your base URL before ``/map``. like this: baseUrl = ``"http://example.com"``; then add it to the ``href`` before ``/map`` as ``"

    New Launch


    Create"``     – akm elias Aug 27 '22 at 17:37
0

Nothing in the other answers worked for me. I ended up having to install jquery and then used it like this:

var link = jQuery("<a href='#'>Create New</a>").click(function () {
    self.onClickCreateNewLaunch(event.latlng.lat, event.latlng.lng);
})[0];

And then just navigated to the page using the function.

mcool
  • 457
  • 4
  • 29