Execute javascript on href page

Question

I'm working on something much bigger but I will resume to provide a more simple example to my problem.

Let's say I have two html pages. On 1st page I have three anchor tags which all links to the 2nd page.

<a href="nextpage.html"> You clicked Red </a>
<a href="nextpage.html"> You clicked Blue </a>
<a href="nextpage.html"> You clicked Yellow </a>

The 2nd page has only an empty paragraf.

When you click one of the three links on 1st page and get directed to the 2nd page, the 2nd page is supposed to contain the text of the respective clicked <a> tag.

I've write my javascript(Jquery) code like this in a .js file and included in the <head> of both pages :

$(document).ready(function() {

  $('a').click(myFunction);
});


function myFunction() {

  var text = $(this).text();  
  $("p").html(text);
}

The above code should work but sadly it doesn't. I run a test in console.log and the result I get when I click a link and get directed to 2nd is undefined. I don't know exactly why this happens since I included the javascript file on both pages and should comunicate with eachother.

Let me correct a misunderstanding you have: because you include a javascript file on two pages that does NOT mean they communicate with each other. — smilebomb, Apr 20 '17 at 15:02
You might need to send your `` text in a Get or Post variable so you can get it from within your other page. — Lixus, Apr 20 '17 at 15:05
no, this will not work, this is not a `single page app` but THREE DIFFERENT INSTANCES of the "same" app... unfortunately, just because you included the same `JavaScript` file in `page1.html`, `page2.html`, and `page3.html`, each of these `html` files get their "own instance" of the `JavaScript "program"` that's included in the `somescript.js` file... this is why it is `undefined` — goto, Apr 20 '17 at 15:06

smilebomb · Accepted Answer · 2017-04-20T15:16:34.787

Why you have `undefined`

this is a keyword in javascript that can refer to several things, depending on where and how it's called.

$(literally anything at all) is a jQuery wrapper around whatever is inside.

In your case, you have a jQuery wrapper around the this keyword. this refers to the function that it is inside of, i.e. myfunciton.

Once something is wrapped inside of the jquery wrapper, jquery adds a bunch of it's own functions, things like text(), html(), slideDown(), etc.

If whatever you passed into the jquery wrapper had a textnode, then the text() function would return the text of that node. But, you passed in myfunction, which does NOT have a text node.

So, $(myfunction).text() is undefined.

Answer

You'll have to pass the value you want on the next page as part of the request somehow. Someone suggested using the browser's localstorage. You can do that. Or you can pass a value as a url parameter.

If you visit www.example.com/?foo=bar then when you load that page you will have access to the foo variable which has the value bar.

Understanding this, you can then write a jquery function which add url parameters to your <a> tags, so that your markup will look like this instead:

<a href="nextpage.html?variable=myspecialvalue">Whatever</a>

Or, you can just change the href values manually in your template if that's not an exhaustive process.

score 1 · Answer 2 · edited May 23 '17 at 12:34

Your issue is because the second page does not know anything about the first page as far as the browser is concerned. If you want to pass the colour to the next page, you would need to provide this as a parameter to the next page (e.g. the querystring). For example

<a href="nextpage.html?col=red"> You clicked Red </a>
<a href="nextpage.html?col=blue"> You clicked Blue </a>
<a href="nextpage.html?col=yellow"> You clicked Yellow </a>

Then use something like the following to get the query string and show the colour (source of getParameterByName): https://stackoverflow.com/a/901144/3713362:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

var colour = getParameterByName("col")
$("p").text(colour);

score 0 · Answer 3 · answered Apr 20 '17 at 15:09

0

As everyone already stated, above code will not work. But If you are open to use localStorage, you can rewrite your code as

function myFunction() {

  var text = $(this).text();  

  localStorage.setItem('linkText', text);

}

And on new page read data from localStorage localStorage.getItem('linkText');

answered Apr 20 '17 at 15:09

Kumar Nitesh

1,634
15
18

Sorry I forgot to mention but i'm looking for a solution which doesn't make use of localStorage. – EddNewGate Apr 20 '17 at 15:15
sure, then you have to use query string to pass data.. as already explained in previous answers – Kumar Nitesh Apr 20 '17 at 15:17

score 0 · Answer 4 · edited May 23 '17 at 12:17

It shouldn't work. The context in which you assigned the html of "p" is on first page, not the 2nd page.

You will need to pass the data(text that you want to show in the next page) via an html attribute. You can probably do this without a form submittal but there is an example of doing that here.

passing form data to another HTML page

You could style the form to be invisible if that is really not what you want, but the answer is you will need to pass the information as an attribute.

score 0 · Answer 5 · answered Apr 20 '17 at 15:12

You can pass the value of the anchor element through a query string like so:

$('a').on('click', function(){
    var param = $(this).text();
    window.location.href = 'nextpage.html?pVal=' + param;
});

Then, on the corresponding nextpage page:

$(document).ready(function(){
    var qString = window.location.href.slice(window.location.href.indexOf('=') + 1);
    $('p').text(qString);
});

Execute javascript on href page

5 Answers5

Why you have undefined

Answer

Why you have `undefined`