how to insert variable values in link href using javascript?

Question

just want to ask if how to add a variable in the href? for example this is the my javascript:

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        function setLinkValue(value) {
            var numItems = $('[id^=site-]').length;

            for (i = 0; i < numItems; i++) { 
                var link = document.getElementsByClassName('site-link');
                link.href = link.href.replace('putNatsvarHere', value);
            }

        }

        //You would pass netsvar here
        setLinkValue('ExampleValue');

    });
</script>

I want to insert it into my a tag in href

<a href="http://websitelink.com/track/putNatsvarHere/pt?thumb_id=302&gn=pt&gi=01.jpg" id="site-link" class="title" target="_self">Exclusive February Sale!</a><br>

    <a href="http://websitelink.com/track/putNatsvarHere/pt?thumb_id=302&gn=pt&gi=01.jpg" id="site-link" class="title-link" target="_self">Sale!</a>
    <br>
    <a href="http://websitelink.com/track/putNatsvarHere/pt?thumb_id=302&gn=pt&gi=01.jpg" id="site-link" class="title-link pink-play" target="_self"> February Sale!</a>

you can use onClick attribute and call getCookie method

Free-Minded
– Free-Minded

2015-09-18 16:55:58 +00:00
Commented Sep 18, 2015 at 16:55 — Free-Minded
– Free-Minded, Commented Sep 18, 2015 at 16:55
How i gonna use that? can you give me a sample code?

Sheerwood John Caday
– Sheerwood John Caday

2015-09-18 16:58:16 +00:00
Commented Sep 18, 2015 at 16:58 — Sheerwood John Caday
– Sheerwood John Caday, Commented Sep 18, 2015 at 16:58

Drew Gaynor · Accepted Answer · 2015-09-22 14:54:34Z

1

You can just replace a segment in the URL with the value, and you don't even need jQuery to do it. See the working example below.

function setLinkValue(value) {
  var link = document.getElementById('site-link');
  
  link.href = link.href.replace('putNatsvarHere', value);
}

//You would pass netsvar here
setLinkValue('ExampleValue');

<a href="http://websitelink.com/track/putNatsvarHere/pt?thumb_id=302&gn=pt&gi=01.jpg" id="site-link" class="title-link pink-play" target="_self">Exclusive February Sale!</a>

You could call setLinkValue in this way:

var natsvar = getCookie("nats");
setLinkValue(natsvar);

To update multiple elements, you could use getElementsByClassName and loop through them.

function setLinkValue(link, value) {
  link.href = link.href.replace('putNatsvarHere', value);
}

var elements = document.getElementsByClassName('title-link');
var i = 0;

for (i = 0; i < elements.length; i++) {
  //You would pass netsvar here
  setLinkValue(elements[i], 'ExampleValue');
}

<a href="http://websitelink.com/track/putNatsvarHere/pt?thumb_id=302&gn=pt&gi=01.jpg" class="title-link pink-play" target="_self">Exclusive February Sale!</a>
<a href="http://example.com/putNatsvarHere/" class="title-link pink-play" target="_self">Another link</a>

edited Sep 22, 2015 at 14:54

answered Sep 18, 2015 at 17:00

Drew Gaynor

8,4825 gold badges42 silver badges53 bronze badges

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

10 Comments

Sheerwood John Caday Over a year ago

It didnt work for me. but i think this is the way i wanted to happen

Sheerwood John Caday Over a year ago

the link on my send became link this <a href="websitelink.com/track/putNatsvarHere/…" id="site-link" class="title-link pink-play" target="_self">Exclusive February Sale!</a> instead the value of putNatsvarHere

Sheerwood John Caday Over a year ago

can you help me @drew?

Drew Gaynor Over a year ago

@SheerwoodJohnCaday I'm not sure what you're asking. If you run the snippet in the answer, you can see that putNatsvarHere in the link becomes ExampleValue, which in your case would be the value of the cookie instead.

Sheerwood John Caday Over a year ago

I think it was only applied in one link? i tried but it look only one link has changed.

|

Collectives™ on Stack Overflow

how to insert variable values in link href using javascript?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related