2011-02-14 18 views
3

私はJavaScriptを学んでおり、innerHTMLで実験したいと思います。乱数は簡単に表示されますが、固定されていません。つまり、それはすぐに消えます。innerHTMLの基礎

<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> 

が、それはので、私は私が

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

+0

どのように「すぐに」という意味ですか?あなたはページをリロードした後ですか? –

+0

リンクをクリックすると、FFで乱数が分けられて表示されます。 – raoulbia

答えて

4

ハイパーリンクがあるため、それは動作しません驚いて非常に簡単に思えるのチュートリアルの下を見てリダイレクトします。これによりinnerHTMLが設定され、ページは元の状態に戻されます。あなたがローカルマシンで開発している場合、これはとても速く、それがJavascriptだと結論づけるかもしれません。 (Webサーバーにアップロードすると、ページの再読み込みがはるかにはっきりしているはずです)。あなたはそれをクリックしたとき、それはリダイレクトしたくないので

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

ハイパーリンクは、設定する必要はありませんので、#に設定します。

はにコードを変更してみてください。

onclickのセミコロン(;)は、呼び出すコードを分けています。だから、機能の大きなリストを持つことができ、たとえば呼び出します

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

戻りfalseが任意のリダイレクトを停止しますか、あなたが持っている場合は機能が迷惑ですページの先頭へ(#のHREFのデフォルトを実行した後にジャンプします長いページ)。

+0

+1超高速です! :) –

+0

ありがとうございました! 「javascript.html」は実際のページの名前です。だから、私はどちらかを使用する必要がありますhref = "#"トムの提案や修正を私のonclickを変更すると、シャドウウィザード – raoulbia

+0

またはその両方で示唆された戻りfalseを追加してください! .htmlページリンクを削除すると、コードの目的がより意味있고、簡潔かつきれいになります。 falseを返すと、クリックされたときの不自然なページジャンプが防止されます。 –

3

文書がリンクhrefにリダイレクトされるため消えます。 innerHTMLとは何の関係もありません。

このようreturn falseを追加し、それを防ぐために:

onclick="getNbr(); return false;" 
2

あなたのリンクは "javascript.html" にあなたをリダイレクトしています。だからあなたの呼び出しの結果は、新たなページがロードので

1

を失っている問題はここにある:あなたがこのアンカーをクリックすると

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

は、ページをjavascript.htmlにリダイレクトされます。次の方法を使用できます。

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