3

I construct this link in my main.js file. Unfortunately, instead of calling the fuction getNextPage it causes my browser to scroll upwards.

<a href="javascript:getNextPage();"> doesn’t work either.

Things do work corretly when typed into the HTML code of my page. I do however then lose my scope variables.

Any ideas?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
user1843495
  • 189
  • 1
  • 9

4 Answers4

4

The issue there is the > char within the body of the <a> tag. It's a character which shall be escaped (see more on HTML Encoding).

The HTML below should work for you:

function getNextPage(){alert('Hi')};
<a href="#" onclick="getNextPage();">next&gt;</a>
Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82
1

You need to stop the default behavior of the HTML anchor link (href="#").

For an onclick event defined inline, you must explicitly pass the click event, so its default behavior (following the href anchor link) can be prevented:

<a href="#" onclick="getNextPage(event)">next></a>

Then, prevent it in the handler with "preventDefault":

<script>
function getNextPage(e) {
  e.preventDefault();
  console.log("Next page");
} 
</script>
Community
  • 1
  • 1
Tim Grant
  • 3,300
  • 4
  • 23
  • 31
0

The best would be <a href="" onclick="getNextPage();"> just like you did (without the # if you don't want the scrolling) But it's supposed to work try to put an alert in your getNextPage function.

You should provide more information; the javascript code. Do you get any error in the console?

NGG
  • 109
  • 8
-1

My suggestion is to use the following code

<a href=“” onclick=“getNextPage();”>next&gt;</a>

Please provide more code so that i can provide appropriate help to you.