自定义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()"