如何使鏈接更改點擊段落的內容？返回false不工作

我正在學習編碼javascripts。在這個腳本中，我想要一個鏈接不去它的指定位置，而是改變段落中的文本。我創建了一個函數來實現它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;

不要使用括號。他們強迫你的功能進行評估。但你想分配的功能。

編輯：

當然，你需要的文件已經被加載後，將您的功能。現在的方式是，執行任務時不會出現編號爲links的元素。基本上，只需將您的腳本塊放在links元素下面即可。

<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（使用的window.onload）：

<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

我已經嘗試過，即使這樣也行不通。它仍然進入點擊鏈接。 –

請看看我的編輯，可能會訣竅。你也可以看看如何使用'document ready'事件，如果你想讓你的腳本保存在head部分，只需要google''javascript document ready event' –

我試着按照你提到的方式分配函數使用確切的代碼）。沒有工作。恐怕會造成更多問題。默認情況下，段落爲「更改的段落內容」而不是「段落內容未更改」 –

當通過document.getElementById打交道時，你應該確保在調用的時候，元素在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文件並在此之後嘗試）。只是好奇，這是普遍的做法嗎？儘管第二種方法現在解決了這個問題，但是在HTML體中編寫JS代碼是不實際的？ –

如何使鏈接更改點擊段落的內容？返回false不工作

回答

相關問題