自定义Javascript函数不能按我的预期工作?
几年前,我开发了一个LOGO般的基本乌龟图形解释器,我不想把它放在网上(因为我的表弟一直在窃听我)。尽管我对HTML,Javascript编码颇为陌生,但我认为我会试试&,以此作为学习体验。自定义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源代码,请让我知道。
您的形式实际上是提交到空的动作。一个空行为通常会刷新当前页面。所以你的网页可能会很快刷新,看起来好像是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
这看起来不错。我想我会按照你的建议转换Send和Reset按钮。并且运行按钮可以用作提交选项。 – 2013-04-24 21:29:22
@mobbarley这是不好的做法。在处理提交的表单时,您应该始终处理'submit'事件。当表单的文本框关注时按下“返回”键时会发生什么?在某些浏览器中,它提交表单...在某些情况下,它不会。 – Ian 2013-04-24 23:36:06
我怀疑mobbarley会使用不同的按钮来实际提交表单,因为使用“发送”按钮所需的仅仅是更新页面上的一个元素而不进行刷新。我已经编辑了这个例子,让mobbarley添加了运行提交按钮。伊恩提出了一个很好的观点,即打入表格后将提交。所以你会想要考虑如何处理。 – keithwyland 2013-04-25 00:28:44
您可能将整个页面发送到服务器,这会导致它刷新,因此您将得到相同的默认值。
为了防止发生这种情况,您可以尝试使用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;
}
嗨,感谢您的回应,但它只是一个本地页面,我还没有将其上传到任何服务器。还有http-equiv =“刷新”元标签。 – 2013-04-24 20:56:20
如果您已经使用'onsubmit'事件,并且您的代码正在执行,这意味着您的页面将提交给服务器,所以阻止它的一种方法是添加'return false;' – 2013-04-24 20:58:39
非常感谢。做过某事。有效。 – 2013-04-24 21:05:25
你需要从pushCmd
返回false
,并更改onsubmit
属性onsubmit="return pushCmd();"
否则表单将提交本身并刷新页面。
此外,你需要改变这一行:
srcText = "<br>" + cmdText;
到:
srcText += "<br>" + cmdText;
这相当于:
srcText = srcText + "<br>" + cmdText;
这意味着要追加cmdText
到srcText
。如果您没有+=
,则基本上最终只会覆盖srcText
而只有cmdText
。
嗨vivin,做到了。你的观点是正确的,但它仍然行不通。 – 2013-04-24 20:58:23
@mobbarley请参阅我的答案,您还需要更改您的HTML属性以返回值:'onsubmit =“return pushCmd()”' – Paulpro 2013-04-24 20:59:43
非常感谢。做过某事。有效。 – 2013-04-24 21:03:57
您正在提交表单,因此页面正在刷新,并将其设置恢复为原始状态。
根据你最终需要什么,一种解决方案是防止表单提交。你可以在你的函数结尾使用简单的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-24 21:05:02
不客气。 – grasp 2013-04-24 21:08:23
您需要从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()
。
这是不正确的。与Javascript绑定的事件处理程序一起使用时,它不一致。内联事件处理程序还需要'return functionCall();'。返回false不仅可以防止冒泡(这不会影响这个),它还可以防止默认行为(如提交) – Ian 2013-04-24 21:05:14
非常感谢。做过某事。有效。 – 2013-04-24 21:06:16
这是因为HTML表单通过发送一个新的HTTP请求提交给服务器,在您的情况下,使用空操作属性,类似于刷新浏览器中的页面。为了防止浏览器执行的默认操作(提交表单),你可以从你的函数返回false
,加入return false;
在它最后一行:
然后改变你的HTML属性返回返回从onsubmit
你的函数值:
onsubmit="return pushCmd()"
既然你是js的新手,我建议你用jQuery学习。它很容易学习/使用,但功能非常强大,可以使许多事情更容易,包括选择某些元素或元素组,绑定事件和动画。 – smerny 2013-04-24 20:57:27
@smerny ...感谢您的建议(没有讽刺)。学习jQuery是在我的待办事项清单上。 – 2013-04-24 21:07:45
只是我的2美分,记得在学习jQuery的同时不断尝试学习JavaScript。可以很容易地学习如何使用框架,而不是继续开发对幕后的理解。 – keithwyland 2013-04-24 21:14:27