Insert javascript variables into a href link within a transactional email

Question

I am trying to build a href url link containing some javascript variables and static text for a transactional email. However, I cannot get the link or displayed URL to show as a complete built URL.

I have tried wrapping them both in single quotes and a few other variants but the URL and displayed URL will just not display correctly. Can anyone help fix this?

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

HTML

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p style="margin: 0;"><a href='"https://example.com/ + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"' target="_blank">'"https://example.com/" + folder + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg"'</a></p>

You can't put JavaScript variables in a href like that, HTML doesn't know what would be a JS variable or just plain text (in this case), you'll have to make the string up in JS and then either change the value on the `` tag or insert it. — George, Apr 15 '19 at 12:22
That is not how you use JavaScript or manipulate DOM elements. This might help you: https://codepen.io/ronv83/pen/wXBMpa . But more generally I suggest you take a basic JavaScript / DOM tutorial as you seem not to have an awareness of the basic concepts — ADyson, Apr 15 '19 at 12:24
Let's step back - this is an email you are sending and rather than hard code the link you're trying to add javascript to the *email* which will modify a url. Don't do that. Your email generating piece should be able to rewrite that url, not rely on the email viewer to support the necessary javascript. — James, Apr 15 '19 at 12:31
Actually James makes a good point, if this HTML is supposed be the actual content of the email, then just supply it ready made, don't include JavaScript in the email body. Most if not all email clients will not execute it. Whatever you are using to create the variables and their values (some other code, I imagine?), instead use that to change the content of the HTML directly. Or consider using some sort of templating engine (like, off the top of my head, XSLT) — ADyson, Apr 15 '19 at 12:33

Code Maniac · Accepted Answer · 2019-04-15T12:31:34.130

You have problem in concatnation

href='"https://example.com/ + folder +
                           |___________  Here you should have `"`

You can instead simply use Template literals

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

let link = `<p style="margin: 0;"><a href='"https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg' target="_blank">https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg</a></p>`

document.querySelector('#link').innerHTML = link

console.log(link)

<div id='link'></div>

score 2 · Answer 2 · answered Apr 15 '19 at 12:25

The best solution would be to use a template literal to create the endpoint, and then another to create the HTML. Then you don't have to worry about all the quotes and their order:

var folder = "orders";
var orderNumber = "589";
var refNum = "Mon";
var job = "image";

const endpoint = `https://example.com/${folder}/${orderNumber}-${refNum}-${job}.jpg`;
const href = `<a href="${endpoint}" target="_blank">${endpoint}</a>`;

document.querySelector('.link').insertAdjacentHTML('beforeend', href);

<p style="margin: 0;">If that button will not work, copy and paste the following link in your browser:</p>
<p class="link" style="margin: 0;"></p>

score 0 · Answer 3 · answered Apr 15 '19 at 12:29

You can try this:

<p style="margin: 0;">
   <a id="myLink" href='' target="_blank">""</a>
</p>

 <script type="text/javascript">
     var folder = "orders";
     var orderNumber = "589";
     var refNum = "Mon";
     var job = "image";

     var myLink = document.getElementById("myLink");
     myLink.href = "https://example.com/" + folder 
              + "/" + orderNumber + "-" + refNum + "-" + job + ".jpg";

     myLink.innerHTML = myLink.href;
 <script>

Templating is the way to go if you want this to neat and generic. Otherwise you can try this the good old JS way.

Insert javascript variables into a href link within a transactional email

3 Answers3