自定義Javascript函數不能按我的預期工作？

Question

幾年前，我開發了一個LOGO般的基本烏龜圖形解釋器，我不想把它放在網上（因爲我的表弟一直在竊聽我）。儘管我對HTML，Javascript編碼頗爲陌生，但我認爲我會試試&，以此作爲學習體驗。

下面的代碼只是基本的用戶界面（我的用戶界面看起來非常醜，我會在以後清理它）。

我已經寫了一個叫做「cmd-form」的onsubmit的Javascript函數pushCmd。

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText += "<br>" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
      } 

表單聲明如下。

<div id="command-container"> 
            <form name="cmd-form" action="" onsubmit="pushCmd()" onreset="resetSource()" method="post"> 
             <input type="text" name="cmd-text" size="80"> 
             <input type="submit" value="Send"> 
             <input type="reset" value="Reset"> 
             <input type="button" value="Run"> 
            </form> 
           </div> 

pushCmd函數應該改變div「source-container」的HTML內容，默認情況下它看起來像下面那樣。

<div id="source-container">NO CODE</div> 

我提交第一個文本（比如說「FWD 100」）後。 「源容器」的內容應改爲「FWD 100」。然後如果我提交「RT 90」，內容應該是「FWD 100
RT 90」。這是我期望的。

但是當我提交文本。 「源容器」的內容只是瞬間變化，然後再次回到「無代碼」。爲什麼會發生這種情況，誰能指出我的錯誤在哪裏？

我試過都得到&後的方法，但結果是一樣的。我在Javascript控制檯中看不到任何錯誤或警告。我使用谷歌瀏覽器版本26.0.1410.63如果重要的話（我猜不是）。

如果您需要任何進一步的信息或完整的HTML源代碼，請讓我知道。

Answer 1

您的形式實際上是提交到空的動作。一個空行爲通常會刷新當前頁面。所以你的網頁可能會很快刷新，看起來好像是source-container div的即時變化。

而不是使用提交按鈕，嘗試鍵入=按鈕，然後在JavaScript中設置該按鈕的onclick。 （注意id=""上的HTML內容發送按鈕）

HTML

<div id="command-container"> 
    <form id="cmd-form" action="" onreset="resetSource()" method="get"> 
    <input type="text" id="cmd-text" name="command" size="80" /> 
    <input type="button" id="btnSend" value="Send" /> 
    <input type="reset" value="Reset" /> 
    <input type="submit" value="Run" /> 
    </form> 
</div> 

<div id="source-container">NO CODE</div> 

的Javascript

function pushCmd() 
{ 
    var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
    var srcElement = document.getElementById("source-container"); 
    var srcText = new String(srcElement.innerHTML); 
    srcText = srcText.toUpperCase(); 
    alert(cmdText); 
    if (srcText.indexOf("NO CODE") != 0) 
    { 
     srcText = cmdText; 
    } 
    else 
    { 
     srcText += "<br>" + cmdText; 
    } 
    srcElement.innerHTML = srcText; 
} 

document.getElementById('btnSend').onclick = pushCmd; 

見本codepen作爲該代碼的一個例子：http://codepen.io/keithwyland/pen/scAJy

Answer 2

您可能將整個頁面發送到服務器，這會導致它刷新，因此您將得到相同的默認值。

爲了防止發生這種情況，您可以嘗試使用AJAX，這將允許您發送數據到服務器而無需刷新整個頁面。

防止頁面提交給服務器的一種方法是將return false;添加到您的函數中。

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText = "<br>" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
       retrun false; 
      } 

Answer 3

你需要從pushCmd返回false，並更改onsubmit屬性onsubmit="return pushCmd();"否則表單將提交本身並刷新頁面。

此外，你需要改變這一行：

srcText = "<br>" + cmdText; 

到：

srcText += "<br>" + cmdText; 

這相當於：

srcText = srcText + "<br>" + cmdText; 

這意味着要追加cmdText到srcText。如果您沒有+=，則基本上最終只會覆蓋srcText而只有cmdText。

Answer 4

您正在提交表單，因此頁面正在刷新，並將其設置恢復爲原始狀態。

根據你最終需要什麼，一種解決方案是防止表單提交。你可以在你的函數結尾使用簡單的return false;來做到這一點。

function pushCmd() { 
    var cmdText = document.forms["cmd-form"]["cmd-text"].value; 

    var srcElement = document.getElementById("source-container"); 
    var srcText = srcElement.innerHTML; 
    srcText = srcText.toUpperCase(); 

    if (srcText.indexOf("NO CODE") != 0) { 
     srcText = cmdText; 
    } else { 
     srcText = "<br>" + cmdText; 
    } 
    srcElement.innerHTML = srcText; 

    return false; 
} 

Answer 5

您需要從onsubmit事件處理程序，以阻止該網頁刷新自己返回false。當您按下提交按鈕時，您的事件處理程序會觸發，但是會立即提交表單，然後再次加載該頁面。如果您從事件處理程序返回false，則會阻止默認行爲。

function pushCmd() 
      { var cmdText = document.forms["cmd-form"]["cmd-text"].value; 
       var srcElement = document.getElementById("source-container"); 
       var srcText = new String(srcElement.innerHTML); 
       srcText = srcText.toUpperCase(); 
       if (srcText.indexOf("NO CODE") != 0) 
       { 
        srcText = cmdText; 
       } 
       else 
       { 
        srcText = "
" + cmdText; 
       } 
       srcElement.innerHTML = srcText; 
       return false; 
      } 

此外，您需要在您的事件處理程序中使用return pushCmd()而不是pushCmd()。

Answer 6

這是因爲HTML表單通過發送一個新的HTTP請求提交給服務器，在您的情況下，使用空操作屬性，類似於刷新瀏覽器中的頁面。爲了防止瀏覽器執行的默認操作（提交表單），你可以從你的函數返回false，加入return false;在它最後一行：

​​

然後改變你的HTML屬性返回返回從onsubmit你的函數值：

onsubmit="return pushCmd()"