How to replace href value in Javascript

Question

I have the following code which changes the big image according to the thumbnail clicked (this part is working).

I want to change accordingly the url in the href (so that each big image shown has a link to another URL). <-- this last part is not working.

----------HERE IS THE CODE ----------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>image swapping </title>



<script type="text/javascript">

function init(){

   th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);
   swapFile(this.href);

   }
  }
 }

function swapImage(url){

   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);

   document.getElementById('bigpic').src=url;

 }

 function swapFile(url){

   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);

   document.getElementById('file').href=url;

 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</head>
<body>

<div>
 <a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>

<div id="thumbs">
 <img src="images/01t.jpg" alt="01t.jpg">
 <img src="images/02t.jpg" alt="02t.jpg">
 <img src="images/03t.jpg" alt="03t.gif">
 <img src="images/04t.jpg" alt="04t.png">
 <img src="images/05t.jpg" alt="05t.png">
 <img src="images/06t.jpg" alt="06t.png">
</div>

</body>
</html>

can you make a JSFiddle ?

Francisco Corrales Morales
– Francisco Corrales Morales

2014-01-19 22:07:01 +00:00
Commented Jan 19, 2014 at 22:07 — Francisco Corrales Morales
– Francisco Corrales Morales, Commented Jan 19, 2014 at 22:07

Schien · Accepted Answer · 2014-01-19 22:08:54Z

2

This question might get flagged as a duplicate, but here's the answer anyway.

To change the href value of an anchor:

document.getElementById('file').setAttribute('href',url);

answered Jan 19, 2014 at 22:08

Schien

3,9231 gold badge20 silver badges29 bronze badges

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

7 Comments

jfriend00 Over a year ago

Why use setAttribute() rather than just: document.getElementById('file').href = url;?

Schien Over a year ago

Certain attributes of a DOM element are altered more reliably by using setAttribute. I looked into the root cause a few years ago, and can't remember the underlying reason. It's now almost muscle memory that I set the "id", "src" and "href" via setAttribute. Try it on IE. Maybe it only works this way.

jfriend00 Over a year ago

There is no reason I'm aware of to use setAttribute() for .id or .href or .src.

Schien Over a year ago

Now you know. It's more likely that you figure this out when you dynamically create DOM elements by using document.createElement. You'll be puzzled why attributes such as "id" are not set correctly without the help of setAttribute. Let me know if you have more questions.

jfriend00 Over a year ago

I'm still aware of no reasons - you haven't described any specific example that supports your claim. I've been using the direct property access for the last 5 years and never had an issue. I'm open to a demonstration, but haven't seen one yet.

|

sinisake · Accepted Answer · 2014-01-19 22:52:08Z

1

You need to change logic slightly...Thumbnails doesn't have links, right?

    <script>
function init(){

   th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);
   swapFile(this.getAttribute("alt"));

   }
  }
 }

function swapImage(url){

   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);

   document.getElementById('bigpic').src=url;

 }

 function swapFile(hurl){

   str=hurl.lastIndexOf(".");
   str1=hurl.substring(str-1);
   str2=hurl.substring(str);

   hurl=hurl.replace(str1,str2);
hurl=hurl.replace('.jpg','.html'); // for html extension at the end of the link

   document.getElementById('file').href=hurl;

 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

Html:

 <div>
 <a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>

<div id="thumbs">
 <img src="images/01t.jpg" alt="01t.jpg">
 <img src="images/02t.jpg" alt="02t.jpg">
</div>

edited Jan 19, 2014 at 22:52

answered Jan 19, 2014 at 22:42

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

2 Comments

sinisake Over a year ago

Great. And, if you want .html extension in link, one small addition: hurl=hurl.replace('.jpg','.html'); in swapfile function...

sueblue Over a year ago

Thanks. I was just writing that question! You answered it before I posted it. It works! Perfect!

Schien · Accepted Answer · 2014-01-19 22:52:08Z

I ran the code in Firebug, and found the error:

   th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);
   swapFile(this.href);

   }
  }
 }

"this" refers to th[c], and now look at your image tags:

 <img src="images/01t.jpg" alt="01t.jpg">
 <img src="images/02t.jpg" alt="02t.jpg">
 <img src="images/03t.jpg" alt="03t.gif">

They don't have href attribute, so your swapFile function fails and terminates script execution. You could add custom attributes to these images:

 <img href="link1" src="images/01t.jpg" alt="01t.jpg">
 <img href="link2" src="images/02t.jpg" alt="02t.jpg">
 <img href="link3" src="images/03t.jpg" alt="03t.gif">

But images are not anchors, so th[c].href will not give you the value.

Here's the new init function:

function init(){

   th=document.getElementById('thumbs').getElementsByTagName('img');

for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);
   swapFile(this.attributes.href.value); // <-- fixed this line

   }
  }
}

I have tested the code locally and it runs.

jabulani sinkala · Accepted Answer · 2021-11-13 07:21:15Z

0

<html>
<head>
<script>
function red(){
var a = document.getElementById("your_tag_name");
a.href = 'www.thelinkyouwanttoadd.com';
}
</script
 </head>
<body>
 <a id="your_tag_name" href="www.google.com" onclick="red()">
</body>
</html>

answered Nov 13, 2021 at 7:21

jabulani sinkala

1

Collectives™ on Stack Overflow

How to replace href value in Javascript

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related