Почему значение атрибута HREF добавляется с предыдущим

Question

Я создаю код, который автоматически устанавливает ссылки на кнопку совместного доступа на каждой странице HTML.

Вот фрагмент кода.

<script> 
 

 
\t x = window.location.href; 
 
\t var fbl = "http://www.facebook.com/sharer.php?u="; 
 
\t var twitterl = "Hi%20!!!%20Check%20Out%20This%20Awesome%20Trick%20Now%20...%20:)%20Dont Miss It.%20"; 
 
\t var gplusl = "http://plus.google.com/share?url="; 
 
\t var pinterestl = "http://pinterest.com/pinthis?url="; 
 

 
\t var fblink = document.getElementById("fb"); 
 
\t var fbHref = fblink.getAttribute('href'); 
 
\t fblink.setAttribute('href', fbHref + fbl + x); 
 

 
\t var twitterlink = document.getElementById("fb"); 
 
\t var twitterHref = twitterlink.getAttribute('href'); 
 
\t twitterlink.setAttribute('href', twitterHref + twitterl + x); 
 

 
\t var gpluslink = document.getElementById("fb"); 
 
\t var gplusHref = twitterlink.getAttribute('href'); 
 
\t gpluslink.setAttribute('href', gplusHref + gplusl + x); 
 

 
\t var pinterestlink = document.getElementById("fb"); 
 
\t var pinterestHref = twitterlink.getAttribute('href'); 
 
\t pinterestlink.setAttribute('href', pinterestHref + pinterestl + x); 
 

 
</script>

<div> 
 
\t <h4>Share This Page</h4> 
 
\t \t <a id="fb" href="" title="Share in Facebook" target="_blank" rel="nofollow"><img src="image/facebook.png" alt="Facebook" title="Facebook"></img></a> 
 
\t \t <a id="twitter" href="" title="Share in Twitter" target="_blank" rel="nofollow"><img src="image/twitter.png" alt="Twitter" title="Twitter"></img></a> 
 
\t \t <a id="gplus" href="" title="Share in Google Plus" target="_blank" rel="nofollow"><img src="image/gplus.png" alt="Google Plus" title="Google Plus"></img></a> 
 
\t \t <a id="pinterest" href="" title="Share in Pinterest" target="_blank" rel="nofollow"><img src="image/pinterest.png" alt="Pinterest" title="Pinterest"></img></a> 
 
\t \t </br></br> 
 
</div>

Проблема этого кода, атрибут href добавляет все вместе постепенно.

Я хочу, чтобы ссылка на Facebook была http://www.facebook.com/sharer.php?u=currentpagelink.

Answer 1

Вы всегда используете один и тот же идентификатор (fb) вместо того, чтобы использовать идентификаторы ссылок, которые вы хотите изменить:

var fblink = document.getElementById("fb"); 
//         ^^^^ 
var twitterlink = document.getElementById("fb"); // should be "twitter" 
//          ^^^^ 
// etc 

Используйте правильные идентификаторы, и он будет работать.

Answer 2

Посмотрите, подходит ли вам это: Use proper Id's for related a tags и вы можете использовать document.getElementById("fb").href, чтобы получить href.

<div> 
 
\t <h4>Share This Page</h4> 
 
\t \t <a id="fb" href="" title="Share in Facebook" target="_blank" rel="nofollow"><img src="image/facebook.png" alt="Facebook" title="Facebook"></img></a> 
 
\t \t <a id="twitter" href="" title="Share in Twitter" target="_blank" rel="nofollow"><img src="image/twitter.png" alt="Twitter" title="Twitter"></img></a> 
 
\t \t <a id="gplus" href="" title="Share in Google Plus" target="_blank" rel="nofollow"><img src="image/gplus.png" alt="Google Plus" title="Google Plus"></img></a> 
 
\t \t <a id="pinterest" href="" title="Share in Pinterest" target="_blank" rel="nofollow"><img src="image/pinterest.png" alt="Pinterest" title="Pinterest"></img></a> 
 
\t \t </br></br> 
 
</div> 
 

 
<script> 
 

 
\t x = window.location.href; 
 
\t var fbl = "http://www.facebook.com/sharer.php?u="; 
 
\t var twitterl = "Hi%20!!!%20Check%20Out%20This%20Awesome%20Trick%20Now%20...%20:)%20Dont Miss It.%20"; 
 
\t var gplusl = "http://plus.google.com/share?url="; 
 
\t var pinterestl = "http://pinterest.com/pinthis?url="; 
 

 
\t var fblink = document.getElementById("fb"); 
 
\t fblink.href=fbl + x; 
 

 
\t var twitterlink = document.getElementById("twitter"); 
 
\t 
 
\t twitterlink.href=twitterl + x; 
 

 
\t var gpluslink = document.getElementById("gplus"); 
 
\t gpluslink.href=gplusl + x; 
 

 
\t var pinterestlink = document.getElementById("pinterest"); 
 
\t pinterestlink.href=pinterestl + x; 
 

 
</script>