javascript - How to prevent the browser from navigating to a page after a link is clicked? - Stack Overflow

admin管理员组

文章数量:1416332

I'm learning javascript and i want to experiment with innerHTML. I see that the random number appear briefly, but it doesn't 'stick' i.e. it disappears immendiately.

<script language="javascript" type="text/javascript">
function getNbr(){
var n = Math.floor(Math.random() * 10) ;
document.getElementById("nbr").innerHTML = n ;
}

  HTML:

<td id="nbr" width="75%">&nbsp;</td> ...
<p><a href="javascript.html" onclick="getNbr()">get a number</a></p>

looking at below tutorial it seems very straightforward so i'm surprised it won't work for me

.php

I'm learning javascript and i want to experiment with innerHTML. I see that the random number appear briefly, but it doesn't 'stick' i.e. it disappears immendiately.

<script language="javascript" type="text/javascript">
function getNbr(){
var n = Math.floor(Math.random() * 10) ;
document.getElementById("nbr").innerHTML = n ;
}

  HTML:

<td id="nbr" width="75%">&nbsp;</td> ...
<p><a href="javascript.html" onclick="getNbr()">get a number</a></p>

looking at below tutorial it seems very straightforward so i'm surprised it won't work for me

http://www.tizag./javascriptT/javascript-innerHTML.php

• javascript

Share Improve this question Follow edited Dec 1, 2024 at 12:34 dumbass 27.3k44 gold badges3838 silver badges7474 bronze badges asked Feb 14, 2011 at 12:27 user425727user425727 2

• How do you mean "immediately"? You mean after reloading the page? – Pekka Commented Feb 14, 2011 at 12:29
• when i click the link, in FF i see a random number appear for a split second – user425727 Commented Feb 14, 2011 at 12:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

The hyperlink is redirecting. This causes the innerHTML to set, then the page is reloaded back to it's original state. If you are developing on a local machine this can be so quick you might conclude it's the Javascript. (Upload it to a webserver and you should see the page reloading a lot clearer).

Try changing the code to:

<p><a href="#" onclick="getNbr();return false;">get a number</a></p>

The hyper link doesn't need to be set, because you don't want it to redirect when you click it, so set it to #.

The semi colons (;) in the onclick separate the code to be called. So you can have a big list of function calls for example:

"getNbr();anotherFunc();yetAnother();return false;"

The return false will stop any redirects or jumps after the functions have run (# href's default to the top of the page which is annoying if you have a long page).

It disappears because the document is redirected to the link href. It got nothing to do with innerHTML.

To prevent it, add return false like this:

onclick="getNbr(); return false;"

Your link is redirecting you to "javascript.html". So the results of your call are lost because the new page loads

The problem is here:

<p><a href="javascript.html" onclick="getNbr()">get a number</a></p>

When you click this anchor, you will be redirected to javascript.html page. You can use the following approach:

<p><a href="#" onclick="getNbr()">get a number</a></p>

本文标签： javascriptHow to prevent the browser from navigating to a page after a link is clickedStack Overflow