Passing Javascript variable to <a href >

Question

<script language="javascript" type="text/javascript">
var scrt_var = 10; 
</script>

HTML Part:

<html>
 this is a <a href ="2.html & Key= scrt_var">Link  </a>
</html>

I just want to sent the javascript variable to link (url parameter)

No AJAX

please frame your question properly so that you can get maximum out of it — Vinay Pandey
– Vinay Pandey, Commented Jun 10, 2009 at 11:34

Blixt · Accepted Answer · 2009-06-10 11:42:46Z

65

If you want it to be dynamic, so that the value of the variable at the time of the click is used, do the following:

<script language="javascript" type="text/javascript">
var scrt_var = 10; 
</script>
<a href="2.html" onclick="location.href=this.href+'?key='+scrt_var;return false;">Link</a>

Of course, that's the quick and dirty solution. You should really have a script that after DOM load adds an onclick handler to all relevant <a> elements.

answered Jun 10, 2009 at 11:42

Blixt

50.3k13 gold badges128 silver badges156 bronze badges

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

5 Comments

user3432703 Over a year ago

i can't use that variable but I can see it in the addressbar. How can I use it?

Mr. Robot Over a year ago

Hi. Can i use instead of variable a function which returns string?

Ken Sharp Over a year ago

This doesn't do anything.

Heretic Monkey Over a year ago

This is horrible advice; don't use JavaScript to do what an anchor does naturally; just change the href attribute of the anchor to the URL you want.

Blixt Over a year ago

While this answer is 11 years old and things would normally be done a bit differently today, I don't think it's fair to say it's horrible advice. For example, if you had 1,000 anchors on the page and each one depended on a variable, would you really suggest to change 1,000 href attributes every time the variable changes? As always, context matters and people's advice are rarely objectively "horrible".

Andrija · Accepted Answer · 2018-03-12 21:57:16Z

29

put id attribute on anchor element

<a id="link2">

set href attribute on page load event:

(function() {
    var scrt_var = 10;
    var strLink = "2.html&Key=" + scrt_var;
    document.getElementById("link2").setAttribute("href",strLink);
})();

edited Mar 12, 2018 at 21:57

answered Jun 10, 2009 at 11:43

Andrija

14.6k18 gold badges69 silver badges88 bronze badges

Comments

SilentGhost · Accepted Answer · 2009-06-10 11:46:41Z

14

<script>
   var scrt_var = 10;
   document.getElementById("link").setAttribute("href",scrt_var);
</script>
<a id="link">this is a link</a>

edited Jun 10, 2009 at 11:46

SilentGhost

322k67 gold badges312 silver badges294 bronze badges

answered Jun 10, 2009 at 11:39

erenon

19.2k2 gold badges65 silver badges97 bronze badges

6 Comments

Kylotan Over a year ago

I think that it would be something like setAttribute("href", "2.html & Key=" + scrt_var) to form the complete link.

Faizan Over a year ago

Yeah that thing works, Thanks for the short & simple trick :) @erenon

Andrew Over a year ago

@erenon Is there a way to add target_new to this code to open in a new tab? thank you.

erenon Over a year ago

@Andrew: .setAttribute("target", "new") chained after the previous similar call. However, please note pop up windows are rather disliked.

Andrew Over a year ago

Thanks! That worked. Opening in a new tab is considered a popup window?I agree I dislike advertisement popup windows that show up in a new browser window, but I find it easier to compare two pages or go back to a page when both are in different tabs.

|

Gander · Accepted Answer · 2019-12-16 14:02:13Z

14

Alternatively you could just use a document.write:

<script type="text\javascript">
var loc = "http://";
document.write('<a href="' + loc + '">Link text</a>');
</script>

edited Dec 16, 2019 at 14:02

Gander

2,0111 gold badge25 silver badges32 bronze badges

answered Jun 10, 2009 at 11:43

Chet

22.2k10 gold badges43 silver badges58 bronze badges

1 Comment

Heretic Monkey Over a year ago

Why is document.write considered a "bad practice"? (it was considered bad practice back in '09 too).

Daniel Moura · Accepted Answer · 2009-06-10 11:44:28Z

9

<html>

<script language="javascript" type="text/javascript">
var scrt_var = 10; 
openPage = function() {
location.href = "2.html?Key="+scrt_var;
}
</script>

 this is a <a href ="javascript:openPage()">Link  </a>
</html>

answered Jun 10, 2009 at 11:44

Daniel Moura

7,9845 gold badges38 silver badges61 bronze badges

Comments

Gander · Accepted Answer · 2019-12-16 11:36:03Z

0

You can also use an express framework

app.get("/:id",function(req,res)
{
  var id = req.params.id;
  res.render("home.ejs",{identity : id});
});

Express file, which receives a JS variable identity from node.js

<a href = "/any_route/<%=identity%> includes identity JS variable into your href without a trouble enter

edited Dec 16, 2019 at 11:36

Gander

2,0111 gold badge25 silver badges32 bronze badges

answered Dec 16, 2019 at 10:12

Sanchit Batra

291 bronze badge

2 Comments

Gander Over a year ago

Check your answer code. I am fixed the code but something missing there anyway.

Quentin Over a year ago

The question shows the variable is in client-side JS. They can't use Express there.

cagcak · Accepted Answer · 2018-01-19 17:55:15Z

-1

If you use internationalization (i18n), and after switch to another language, something like ?locale=fror ?fr might be added at the end of the url. But when you go to another page on click event, translation switch wont be stable.

For this kind of cases a DOM click event handler function must be produced to handle all the a.href attributes by storing the switch state as a variable and add it to all a tags’ tail.

answered Jan 19, 2018 at 17:55

cagcak

4,2462 gold badges24 silver badges24 bronze badges

Comments

Zunaira Khan · Accepted Answer · 2020-03-19 06:21:56Z

-1

JAVASCRIPT CODE:

<script>

    function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

var user = getUrlVars()["user"];
var pass = getUrlVars()["pass"];
var sub  = getUrlVars()["sub"];
</script>

<script>
    var myApp = angular.module('myApp',[]);

myApp.controller('dropdownCtrl', ['$scope','$window','$http', function($scope, $window, $http) {

 $http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass)

     .then(function (response) {$scope.names = response.data.admin;});
    $scope.names = [];

        $http.get('http://dummy.com/app/chapter.php?user='+user+'&pass='+pass+'&sub='+sub)

            .then(function (response) {$scope.chapter = response.data.chp;});
           $scope.chapter = [];

};


}]);
    </script>

HTML:

<div ng-controller="dropdownCtrl">
<div ng-repeat="a in chapter">
<a href="topic.html?ch={{a.chapter}}" onClick="location.href=this.href+'&user='+user+'&pass='+pass+'&sub='+sub;return false;">{{a.chapter}}</a>
</div>

answered Mar 19, 2020 at 6:21

Zunaira Khan

11 bronze badge

1 Comment

Quentin Over a year ago

This seems to be an excessively complicated approach … and one which has at least one external dependency that you haven't explained how to load.

NOTSermsak · Accepted Answer · 2025-05-01 11:47:57Z

-1

Let me try to update with a new answer.

JavaScript Part:

<script language="javascript" type="text/javascript">
    var scrt_var = 10;

    function hrefByVariable(variable = '') {
        window.location.replace('2.html&Key=' + variable);
    }
</script>

HTML Part:

<html>  
    This is a <a href='javascript:hrefByVariable(scrt_var);'>Link</a> 
</html>

These are all pure JavaScript and HTML and will all work, please try.

answered May 1 at 11:47

NOTSermsak

3541 gold badge8 silver badges8 bronze badges

1 Comment

NOTSermsak May 17 at 1:21

The hrefByVariable(scrt_var) function is not the same technique as the openPage() function and is more closely related to the main curiosity than the other one. The main curiosity is to "Passing JavaScript variable to <a href>" But I will accept the 'dislike' judgment from everyone as okay.

Collectives™ on Stack Overflow

Passing Javascript variable to <a href >

9 Answers 9

5 Comments

Comments

6 Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

Comments

6 Comments

1 Comment

Comments

2 Comments

Comments

1 Comment

1 Comment

Linked

Related