リンクをクリックして段落の内容を変更するにはどうすればよいですか？戻りfalseは動作しません

私はJavaScriptをコードすることを学んでいます。このスクリプトでは、指定された場所に移動せずにその前の段落のテキストを変更するリンクを作成します。私はonclickを達成するための関数を作成しましたが、関数はfalseを返すことができません。リンクをクリックして段落の内容を変更するにはどうすればよいですか？戻りfalseは動作しません

<html> 
<head> 
    <title>Javascript Test #6</title> 
    <script type="text/javascript"> 
     document.getElementById("links").onclick=writeData(); 
     function writeData() 
      { 
       document.getElementById("para").innerHTML="Changed Paragraph Content"; 
       return false; 
      } 
    </script> 
</head> 
<body> 
    <p id="para">Unchanged Paragraph Content</p> 
    <br/> 
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a> 
</body> 
</html>

出典

2011-11-18 Supratim Nayak

document.getElementById("links").onclick=writeData;

ブラケットを使用しないでください。彼らはあなたの機能を評価するよう強制します。その機能を割り当てる必要があります。

EDIT：

コースのうち、あなたはドキュメントがロードされた後に機能を割り当てる必要があります。今のところ、割り当てが実行されると、IDがlinksの要素はありません。基本的には、スクリプトブロックをlinks要素の下に置いてください。（window.onloadを使用）

<html> 
<head> 
    <title>Javascript Test #6</title> 
</head> 
<body> 
    <p id="para">Unchanged Paragraph Content</p> 
    <br/> 
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a> 

    <script type="text/javascript"> 
     document.getElementById("links").onclick=writeData; 
     function writeData() 
     { 
      document.getElementById("para").innerHTML="Changed Paragraph Content"; 
      return false; 
     } 
    </script> 
</body> 
</html>

EDIT：のdocument.getElementByIdを扱う場合

<html> 
<head> 
    <title>Javascript Test #6</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
      document.getElementById("links").onclick=writeData; 
     } 

     function writeData() 
     { 
      document.getElementById("para").innerHTML="Changed Paragraph Content"; 
      return false; 
     } 
    </script> 
</head> 
<body> 
    <p id="para">Unchanged Paragraph Content</p> 
    <br/> 
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a> 
</body> 
</html>

出典

2011-11-18 07:57:23

を参照しちょうどインラインクリックハンドラを使用します私はそれを試しても、それは動作しません。それはまだクリックのリンクに行きます。 –

私の編集を見てください、トリックを行う可能性があります。また、 'javascript document readyイベント'のためにgoogleを頭の部分に置いておきたい場合は、 'document ready'イベントの使い方を見てみることもできます。 –

正確なコードを使用しました）。うまくいきませんでした。私はそれがより多くの問題を引き起こしたのではないかと思います。デフォルトでは、段落は「変更されていない段落の内容」の代わりに「段落の内容が変更されました」と表示されます –

、あなたは、呼び出しの時点で、要素がDOMであることを確認する必要があります。

<html> 
    <head> 
    <title>Javascript Test #6</title> 
    <script type="text/javascript"> 
     function writeData() 
     { 
      document.getElementById("para").innerHTML="Changed Paragraph Content"; 
      return false; 
     } 
    </script> 
    </head> 
    <body> 
     <p id="para">Unchanged Paragraph Content</p> 
     <br/> 
     <a id="links" href="javascript-return.html" onclick="return writeData();"> Click here  to change the paragraph content </a> 
    </body> 
</html>

それとも、物事の順序変更：最初のDOMを準備して、その後、挿入スクリプトをJS：

<html> 
    <head> 
    <title>Javascript Test #6</title> 
    </head> 
    <body> 
     <p id="para">Unchanged Paragraph Content</p> 
     <br/> 
     <a id="links" href="javascript-return.html" onclick="return writeData();"> Click here  to change the paragraph content </a> 
     <script type="text/javascript"> 
      document.getElementById("links").onclick=writeData; 
      function writeData() 
      { 
       document.getElementById("para").innerHTML="Changed Paragraph Content"; 
       return false; 
      } 
     </script> 
    </body> 
</html>

はit in action here: http://jsfiddle.net/2CpcF/

出典

2011-11-18 08:06:25

ありがとうたくさんのAlex Pacurar –

私は実際にこれを試す前に最初の方法を試しました。しかし、HTML本体でJS関数を呼び出すことは、かなり長いページをコーディングすると不快に感じるかもしれません。主な目的はJSを身体から隠すことです（私は外部のJSファイルを使用して、これを試します）。ただ好奇心が強い、これは一般的な練習ですか？2番目の方法は今のところ目的を解決しますが、JSコードをHTML本体に書くのは現実的ではありません。 –

リンクをクリックして段落の内容を変更するにはどうすればよいですか？戻りfalseは動作しません

答えて

関連する問題