Passing Javascript variable to

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, Jun 10 '09 at 11:34

score 64 · Accepted Answer · answered Jun 10 '09 at 11:42

64

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 '09 at 11:42

Blixt

49,547
13
120
153

1

i can't use that variable but I can see it in the addressbar. How can I use it? – Jul 02 '14 at 13:07
Hi. Can i use instead of variable a function which returns string? – Mr. Robot Jul 09 '15 at 18:20
This doesn't do anything. – Ken Sharp Jul 30 '20 at 19:37
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. – Heretic Monkey Sep 06 '21 at 18:34
1

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". – Blixt Sep 07 '21 at 09:40

Andrija · Answer 2 · 2018-03-12T21:57:16.393

28

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 '18 at 21:57

answered Jun 10 '09 at 11:43

Andrija

14,037
18
60
87

score 14 · Answer 3 · edited Dec 16 '19 at 14:02

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 '19 at 14:02

Gander

1,854
1
23
30

answered Jun 10 '09 at 11:43

Chet

21,375
10
40
58

1

[Why is document.write considered a "bad practice"?](https://stackoverflow.com/q/802854) (it was considered bad practice back in '09 too). – Heretic Monkey Sep 06 '21 at 18:36

score 13 · Answer 4 · edited Jun 10 '09 at 11:46

13

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

edited Jun 10 '09 at 11:46

SilentGhost

307,395
66
306
293

answered Jun 10 '09 at 11:39

erenon

18,838
2
61
93

I think that it would be something like setAttribute("href", "2.html & Key=" + scrt_var) to form the complete link. – Kylotan Jun 10 '09 at 11:42
Yeah that thing works, Thanks for the short & simple trick :) @erenon – Faizan Feb 09 '13 at 11:14
@erenon Is there a way to add target_new to this code to open in a new tab? thank you. – Andrew Jul 02 '14 at 21:10
1

@Andrew: .setAttribute("target", "new") chained after the previous similar call. However, please note pop up windows are rather disliked. – erenon Jul 04 '14 at 09:31
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. – Andrew Jul 08 '14 at 16:31
@Andrew If you omit `target=_new`, the user can control click or right click to open a new window or tab. If you use `target=_new`, the user can't avoid opening a new window or tab. It's better to give the user the option instead of forcing them to do it the way you want. – Teepeemm Jul 18 '14 at 15:54

score 9 · Answer 5 · answered Jun 10 '09 at 11:44

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 '09 at 11:44

Daniel Moura

7,816
5
35
60

score 0 · Answer 6 · edited Dec 16 '19 at 11:36

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 '19 at 11:36

Gander

1,854
1
23
30

answered Dec 16 '19 at 10:12

Sanchit Batra

29
1

Check your answer code. I am fixed the code but something missing there anyway. – Gander Dec 16 '19 at 15:20
The question shows the variable is in client-side JS. They can't use Express there. – Quentin May 10 '22 at 13:53

score -1 · Answer 7 · answered Jan 19 '18 at 17:55

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.

score -1 · Answer 8 · answered Mar 19 '20 at 06:21

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>

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. — Quentin, May 10 '22 at 13:53

Passing Javascript variable to

8 Answers8

Linked

Related