5

几年前我开发了一个类似 LOGO 的基本海龟图形解释器，我不想把它放到网上（因为我表弟一直在烦我）。尽管我对 HTML、Javascript 编码还是很陌生，但我想我会尝试一下并将其作为学习经验。

下面的代码只是用于基本的 UI（我的 UI 看起来很丑，稍后我会清理它）。

我编写了一个 Javascript 函数 pushCmd，它被称为“cmd-form”的 onsubmit。

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”。这就是我所期望的。

但是当我提交文本时。“源容器”的内容只是瞬间改变，然后又回到“无代码”。为什么会这样，谁能指出我的错误在哪里？

我尝试了 get 和 post 方法，但结果是一样的。我在 Javascript 控制台中也看不到任何错误或警告。如果这很重要，我正在使用 Google chrome 版本 26.0.1410.63（我猜不是）。

如果您需要任何进一步的信息或完整的 HTML 源代码，请告诉我。

4

6 回答 6

3

发生这种情况是因为 HTML 表单通过发送一个新的 HTTP 请求提交给服务器，在您的情况下，该请求具有空操作属性，类似于在浏览器中刷新页面。为了防止浏览器执行默认操作（提交表单），您可以false从函数返回，方法是return false;在其中添加最后一行：

function pushCmd() {
    var cmdText = document.forms["cmd-form"]["cmd-text"].value;
    var srcElement = document.getElementById("source-container");
    var srcText = srcElement.innerHTML.toUpperCase();

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

然后更改您的 HTML 属性以从以下位置返回函数的返回值onsubmit：

onsubmit="return pushCmd()"
于 2013-04-24T20:53:02.437 回答
2

false您需要从中返回pushCmd，并将onsubmit属性更改为，onsubmit="return pushCmd();"否则表单将自行提交并刷新页面。

此外，您需要更改此行：

srcText = "<br>" + cmdText;

到：

srcText += "<br>" + cmdText;

这相当于：

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

这意味着您要附加cmdText到srcText. 如果你没有+=，你基本上最终会被srcText覆盖cmdText。

于 2013-04-24T20:51:41.000 回答
1

您正在提交表单，因此页面正在刷新，将其设置回原始状态。

根据您最终的需要，一种解决方案是阻止表单提交。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;
}
于 2013-04-24T20:51:58.373 回答
1

您的表单实际上正在提交给空操作。一个空的动作通常会刷新当前页面。因此，您的页面可能刷新得如此之快，以至于它似乎是source-containerdiv 的即时更改。

不要使用提交按钮，而是尝试 type=button 然后在 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

于 2013-04-24T21:11:01.243 回答
0

您可能会将整个页面发送到服务器，这将导致它刷新，因此您将获得相同的默认值。

为了防止这种情况发生，您可以尝试使用 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;
            }
于 2013-04-24T20:51:39.677 回答
0

您需要false从onsubmit事件处理程序返回以防止页面自行刷新。当您按下提交按钮时，您的事件处理程序会触发，但随后会立即提交表单，这会再次加载页面。如果您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()在您的事件处理程序中。

于 2013-04-24T20:52:43.553 回答