passing var from js to html

Question

I have searched but wasn't able to find what i am looking for. I have one js file that will have multiple href links in it:

var link1="http://somelink.com"
var link2="http://another.com"
var link3="http://morelinks.com"

etc.... will be many variables

In my html file I would like to be able to call one or more of those link into an href.

<a href="link1">my first link</a>
<a href="link3">random link</a>

My question is , how can I pass one or more of these variables over to my html file?

UPDATE: Ok, here is my code with the snippet that Tugca supplied... I know that Im going to be missing something dumb on my part.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Local Hotels</title>
  <link rel="stylesheet" href="HotelStyleSheet.css" />
  <script>
    var link1 = "http://firstwebsite.com";
    var link2 = "http://anotherwebsite.com";
    document.getElementById("link_1").href = link1;
    document.getElementById("link_2").href = link2;
  </script>
</head>

<body onload=resizeTo(480,270)>

  <div class="list">
    <div class="hotel"> <a id="link_1">My first link</a>
    </div>

    <div class="list">
      <div class="hotel"><a id="link_2">The second link</a>
      </div>
    </div>

</body>

HTML does not have variables, so you cant pass anything. you can only use the javascript to render HTML and append it to the document. — NDM, Jan 23 '17 at 12:22
Would you like to populate the html links at page load or dynamically at some point after the page loads? — nicktendo, Jan 23 '17 at 12:23
So you want to replace `href` with their corresponding variables in JavaScript scope? — Adam Azad, Jan 23 '17 at 12:23
Possible duplicate of [How can I add "href" attribute to a link dynamically using JavaScript?](http://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript) — Rajesh, Jan 23 '17 at 12:23
@nicktendo - Populating at page load would be perfect. Once the links are setup, they wouldn't be changing so dynamic really wouldn't be necessary (at least I don't think so) — Wayne, Jan 23 '17 at 12:35

Tuğca Eker · Accepted Answer · 2017-01-23T12:42:44.827

1

You can't pass variable form JavaScript to HTML. In normal work-flow, HTML will be rendered ~~before~~ being unaware of JavaScript. But you can modify HTML (or DOM elements). This is why we're using JavaScript.

var link1 = "http://stackoveflow.com/";
document.getElementById("link_1").href = link1;
document.getElementById("link_2").href = 'http://stackoverflow.com/questions';

<a id="link_1">my first link</a>
<a id="link_2">random link</a>

edited Jan 23 '17 at 12:42

answered Jan 23 '17 at 12:25

Tuğca Eker

1,423
12
20

1

Just a convention, you should not answer questions that are duplicate. That limits scope. There are posts that are going on from years and have different ways and discussion that can help. I understand you do not have enough rep to mark a question a dupe, but please add a habit to search for questions that are similar and add it as a comment. That will help more. :-) – Rajesh Jan 23 '17 at 12:29
Oh, I did not realize that. What I am trying to do is minimize the coding in the html file, and have a separate file where I can maintain the links. So, after the page loads, I can then modify the href? Can this be done from another file, or does it all have to be contained within the same html? – Wayne Jan 23 '17 at 12:30
Actually, i did try to edit my question to state that I had did a search (i found the page that said 'show your work"). I was in the middle of editing it, but you guys are so fast at answering.... which is awesome by the way. – Wayne Jan 23 '17 at 12:32
@Rajesh you are certainly right. But, my idea was not explaining "how to add attribute dynamically". Instead, I tried to explain why variable passing from JS to HTML is illogical. – Tuğca Eker Jan 23 '17 at 12:34
@Wayne You can manipulate DOM anytime. Yes, you can export this code to a JS file. In fact, its the intended way. You can use `window.addEventListener(Event, handler(){...})` to attach event. You can use `onload` or `domcontentload`. You will find more information about them [here](http://stackoverflow.com/questions/2414750/difference-between-domcontentloaded-and-load-events). – Rajesh Jan 23 '17 at 12:44
@Rajesh still you will have head or script tag which is also HTML (if you are using right syntax). Anyway, I understood your point and advice. Thanks. – Tuğca Eker Jan 23 '17 at 12:47
@Rajesh I'm trying the code snippet that Tugca supplied (it's seems to be what I am looking for) but for some reason, its not working. I'm trying to paste the code here in the comment... but sosome reason its not letting me do it... stby so i can figure this out. – Wayne Jan 23 '17 at 12:51
@Wayne you can use `JSFiddle`, `CodePen` and other online tools to share code. You can also add snippet in SO. `<>` will open a window where you can put you `HTML`, `JS` and `CSS` and execute your code to provide a working demo. Also note he is using `document.getElementById` so that will search based on `id` in HTML. – Rajesh Jan 23 '17 at 12:56
@Wayne you will find answer to your current problem over here: http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – Rajesh Jan 23 '17 at 13:07
@TuğcaEker Thanks Tugca... that code works beautifully... Thanks to everyone for helping me. Now that I see it working, I can understand how simple is it, and how I have an issue of over-complicating my work. :) – Wayne Jan 23 '17 at 13:15

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

you can create anchor tags dynamically using js

var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);

see this question for reference..

edited May 23 '17 at 12:01

Community

1
1

answered Jan 23 '17 at 12:28

AMahajan

179
1
3
15

1

Just a convention, you should not answer questions that are duplicate. That limits scope. There are posts that are going on from years and have different ways and discussion that can help. I understand you do not have enough rep to mark a question a dupe, but please add a habit to search for questions that are similar and add it as a comment. That will help more. :-) – Rajesh Jan 23 '17 at 12:29
Thank you for your suggestion – AMahajan Jan 23 '17 at 12:32

passing var from js to html

2 Answers2