Link HREF dynamic variable

Question

Having several links in my webpage with the same HREF value, this value will change on a daily basis, i don't want to change all values of links (easily 20). My question is : is there a way to store the value in one variable in the HTML code and make all links take theirs HREFs from this value ? I know it can be done in javascript so whats the correct script and do i have to put it in the onload event ? below the script i use to change all links with the variable;

<span style="display:none" id="dynamiclink" data-alink="http://www.google.com"></span>
<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>
<a href="#" id="link3">Link 3</a>

<script>
const spanlink = document.getElementById("dynamiclink");
const dynlink= spanlink.getAttribute("data-alink");
document.getElementById("link1").setAttribute("href",dynlink);
document.getElementById("link2").setAttribute("href",dynlink);
document.getElementById("link3").setAttribute("href",dynlink);
</script>

Edited, here is my code, so to be more clear my question was can i do this with HTML, i mean is there a way in HTML to link element attribute as HREF to a variable,

Thanks again guys.

There are no variables in HTML, you have to do it with JavaScript. — Barmar
– Barmar, Commented May 11, 2021 at 1:22
@Barmar it is not a free coding service, everyone knows, and no one asked you to code something for anyone, I am a delphi programmer and i just started few months ago webdevelopment i am a beginner and the only project i am on is personnal and when i am stuck i ask, i have done it with JS but i am asking if this can be done with HTML,Sorry for you if you didn't catch the meaning of community website .... Anyway i read the links you posted ... everything is ok i think — Stalkium
– Stalkium, Commented May 11, 2021 at 1:32
"what's the correct script?" How do we answer that without writing the code for you? — Barmar
– Barmar, Commented May 11, 2021 at 1:33
In your load event listener, loop through all the anchors and assign to element.href — Barmar
– Barmar, Commented May 11, 2021 at 1:33
You could also use a click event listener on all the anchors, which gets the target to link to from JavaScript. — Barmar
– Barmar, Commented May 11, 2021 at 1:35

Barmar · Accepted Answer · 2021-05-11 03:57:24Z

2

Give all the links the same class and use a loop to set them all.

const spanlink = document.getElementById("dynamiclink");
const dynlink= spanlink.getAttribute("data-alink");
document.querySelector(".alink").forEach(link => link.href = dynlink);

<span style="display:none" id="dynamiclink" data-alink="http://www.google.com"></span>
<a href="#" class="alink">Link 1</a>
<a href="#" class="alink">Link 2</a>
<a href="#" class="alink">Link 3</a>

answered May 11, 2021 at 3:57

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Link HREF dynamic variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related