Can I pass a URL as a variable?

Question

I have the following script that is not giving me the result I want. JSFiddle link at the bottom.

Note: This is not my image. I grabbed it randomly from imgur.

I expect:

<img src="https://i.imgur.com/MiOeWrk.jpg" style="max-width:800px;">

But I get this, I believe, but I'm unable to write this in a code block while debugging, for some reason.

<img src="http://thisismydomain.com/https://i.imgur.com/MiOeWrk.jpg" style="max-width:800px;">

Here's my script. Please advise:

<div><a href="javascript:viewimage('https://i.imgur.com/MiOeWrk.jpg','video_aba');">Show Image</a></div>

<div id="jsdebug">jsdebug</div>
<div id="video_aba">video_aba</div>

<script>    
function viewimage(ytlink, uid) {
  var imagelink = ytlink;
  document.getElementById("jsdebug").innerHTML = imagelink;
  var uid = uid;
  if (imagelink.length == 0) {
    imageembed = "<strong>Sorry, unable to load.</strong>";
  } else {
    imageembed = "<img src=\"/" + imagelink + "\" style=\"max-width:800px\">";
  }
  document.getElementById("video_aba").innerHTML = imageembed;
}
</script>

https://jsfiddle.net/gde5630h/

JSFiddle has this odd behavior where functions that *appear* to be defined on the top level actually aren't, so they aren't global by default. (but, it would be even better to attach the listeners properly using `addEventListener`, and then you wouldn't have run into the problem in the first place) — CertainPerformance, Jul 12 '19 at 05:34
No. It's passed by a variable via VBScript (classic ASP). When I debug via ASP what is passed, it is the correct URL. — Astralis Lux, Jul 12 '19 at 05:37
The problem is you write link like this `imageembed = "";` / => this will prepend to your current domain url eg.if your domain is localhost it will goes http://localhost/https://i.imgur.com/MiOeWrk.jpg — hs-dev2 MR, Jul 12 '19 at 05:49
I think that is not related with jsfiddle @CertainPerformance see my comment above — hs-dev2 MR, Jul 12 '19 at 05:50
@hs-dev2MR how can I write this so it's not prepended? I'm running this on my own domain name, if that's what you mean by localhost. — Astralis Lux, Jul 12 '19 at 05:51
@hs-dev2MR That was it. I would have never imagined I shouldn't wrap that in quotes. Someone mentioned that I cannot use href= but have to use onclick=. But I receive no errors and this has worked for me for years with no problems. Thoughts? — Astralis Lux, Jul 12 '19 at 05:57
Thanks to everyone for checking it out and responding. @hs-dev2MR how do I select your response as the answer? — Astralis Lux, Jul 12 '19 at 06:02

anjaneyulubatta505 · Answer 1 · 2019-07-12T06:08:34.207

1

Your attribution is not correct. href should be replaced with onclick event.

"href" is not used for javascript events. It is used to link the webpages.

javascript events are `onclick`, `onhover`, `onmouseenter`, etc.

function viewimage(ytlink, uid) {
  var imagelink = ytlink;
  var uid = uid;
  if (imagelink.length == 0) {
    imageembed = "<strong>Sorry, unable to load.</strong>";
  } else {
    imageembed = `<img src="${ytlink}" style="width:800px">`;
  }
  document.getElementById("video_aba").innerHTML = imageembed;
  document.getElementById("jsdebug").innerText = imageembed;
}

a {
color: blue;
text-decoration: underline;
cursor: pointer;
}

<div><a href="#" onclick="viewimage('https://i.imgur.com/MiOeWrk.jpg','video_aba');">Show Image</a></div>

<div id="jsdebug">jsdebug</div>
<div id="video_aba">video_aba</div>

edited Jul 12 '19 at 06:08

answered Jul 12 '19 at 05:38

anjaneyulubatta505

10,713
1
52
62

I'm using plain Javascript. Your response requires JQuery, right? – Astralis Lux Jul 12 '19 at 05:39
1

He is using plain JS. But I hope to add more explanation – hs-dev2 MR Jul 12 '19 at 05:40
1

@Astralis it's a `plain javascript` – anjaneyulubatta505 Jul 12 '19 at 05:43
That still gives me the wrong variable where I want this as the output: https://i.imgur.com/MiOeWrk.jpg but I get this http://example.com/https://i.imgur.com/MiOeWrk.jpg – Astralis Lux Jul 12 '19 at 05:48
2

While you're right that href should not be used for Javascript events, that doesn't mean it *can't* be - simply changing the href to onclick will not solve the problem – CertainPerformance Jul 12 '19 at 05:53
@CertainPerformance what do you meant to say ? check out above snippet. – anjaneyulubatta505 Jul 12 '19 at 05:56
1

It mean href is also work for `javascript:functionname` – hs-dev2 MR Jul 12 '19 at 05:58
Really can you provide some link about it .. I didn't know it – hs-dev2 MR Jul 12 '19 at 06:11

score 1 · Accepted Answer · answered Jul 12 '19 at 06:06

1

The problem is what your image link coded . It's like this imageembed = "<img src=\"/" + imagelink + "\" style=\"max-width:800px\">";

/ => this will prepend to your current domain url eg.if your domain is localhost it will goes localhost/https://i.stack.imgur.com/gQ54n.jpg

So remove / from your image link

answered Jul 12 '19 at 06:06

hs-dev2 MR

214
1
12

@hs-dev2MR you can better syntax ES6 (i.e using backticks) – anjaneyulubatta505 Jul 12 '19 at 06:18

Can I pass a URL as a variable?

2 Answers2

"href" is not used for javascript events. It is used to link the webpages.

javascript events are onclick, onhover, onmouseenter, etc.

javascript events are `onclick`, `onhover`, `onmouseenter`, etc.