Search code examples
javascripthtmlurlurl-rewritingcreateelement

Generating and using URLs as jscript variables

I have now spent hours trying to figure out how you do this by reading other's posts - I even got a jsfiddle to work, but can't get this to work in my page.

I want to construct a URL to be used on a page multiple times, so that when I need to update the URL, I only need to do it in one place via a Javascript variable in the header.

I break the URL into two parts because one of the variables will nearly always be the same, but the other most often will be different on different pages.

For example, I declare in my header:

<script language="javascript" type=”text/javascript”>
function goSchedule()
{
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href= schedulePath;
}
</script>

And then I can't seem to figure out how to call it in the href. This doesn't work:

<p>Click the following link to test:<a href="javascript:goSchedule();" id="go">Test this link</a></p>

If you answer, please explain how the initial Javascript is created and how to properly call it so it becomes an active URL.

Solution

  • It looks like you are trying to replace the href attribute at the moment the user clicks the link. I suggest you replace the href attribute once for all the link as soon as the page has finished loading.

    Make sure you declare your function in the head section

    <head>

<!-- Other head declarations ... -->

<script language="javascript" type=”text/javascript”>
function goSchedule() {
    var schedulePath = "http://[rootPath]/";
    var scheduleFileName = "[extension to document].htm";
    schedulePath = schedulePath + scheduleFileName;
    document.getElementById('go').href = schedulePath;
}
</script>
</head>

    And then bind this method to the onload event of the body element like this

    <body onload="goSchedule()">

    <!-- Other HTML Stuff Goes Here ... -->

    <p>Click the following link to test:<a href="javascript:void" id="go">Test this link</a>
    </p>
</body>

    Here is the full html page:

    <html>
    <head>

        <!-- Other head declarations ... -->

        <script language="javascript" type="text/javascript">
            function goSchedule() {
                var schedulePath = "http://support.mozilla.org/";
                var scheduleFileName = "en-US/products/firefox?as=u&utm_source=inproduct";
                schedulePath = schedulePath + scheduleFileName;
                document.getElementById('go').href = schedulePath;
            }
        </script>
    </head>
    <body onload="goSchedule()">

        <!-- Other HTML Stuff Goes Here ... -->

        <p>Click the following link to test:<a href="javascript:void" id="go">Test this link</a>
        </p>
    </body>
</html>