Question

几年前我开发了一个类似LOGO的基本龟图形解释器，我不想把它放在网上（因为我的堂兄一直在为我烦恼）。虽然我对HTML很新，但Javascript编码我认为我会试一试。把它作为一种学习经历。

以下代码仅适用于基本用户界面（我的用户界面看起来非常难看，我稍后会对其进行清理）。

我编写了一个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”。这就是我对它的期望。

但是当我提交文本时。 “源 - 容器”的内容瞬间改变，然后又回到“无代码”。为什么会发生这种情况，有人可以指出我的错误所在吗？

我试过两个得到＆amp;发布方法但结果是一样的。我也无法在Javascript控制台中看到任何错误或警告。我正在使用Google Chrome版本26.0.1410.63，如果这很重要（我猜不是）。

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

Answer 1

这种情况正在发生，因为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()"

Answer 2

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

此外，您需要更改此行：

srcText = "<br>" + cmdText;

为：

srcText += "<br>" + cmdText;

这相当于：

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

这意味着您要将cmdText追加到srcText。如果您没有+=，则基本上只会使用srcText覆盖cmdText。

Answer 3

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

根据您最终需要的内容，一种解决方案是阻止表单提交。您可以在函数末尾使用简单的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 4

您的表单实际上是在提交空行动。空操作通常最终会刷新当前页面。因此，您的网页可能会如此快速地刷新，以至于它似乎是source-container div的即时更改。

不要使用“提交”按钮，请尝试键入=按钮，然后在javascript中设置该按钮的onclick。（请注意HTML中“发送”按钮上的id=""

<强> 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 5

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

为了防止这种情况发生，您可以尝试使用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 6

您需要从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()。

自定义的Javascript函数不能像我预期的那样工作？

6 个答案: