Javascript函数打印.innerhtml，但HTML只出现一会儿就消失了

Question

我有一个按钮，调用名为"submit()"的javascript函数。在这个函数中，我只写document.getElementById('try')。innerHTML ="工作";来测试我的按钮是否向函数传递数据。

问题是"它工作了"在消失之前打印了大约半秒。

我制作了一个完整的表单，使用相同的html页面完美地将处理过的数据打印到网页上。唯一的区别是我改变了表单的结构，并将函数移到了.js文件中。

尽管现在，即使我注释掉.js文件中的submit()函数并将该函数粘贴到核心html文件中，也会发生同样的事情。我可以粘贴的上面或下面的形式和相同的东西的结果。

这是我的HTML:

<div class="formsection">
            <button type="Submit" onclick="Submit()">Submit</button>
        </div>
    </form>
</div>
<div id="output">
<p> Try this: <span id="try"></span></p>
</div>

这是我的javascript函数:

<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";   
}
</script>

Answer 1

你正在使用提交按钮来测试你的代码，它执行JS代码并提交表单。

如果你不希望表单被提交，使用submit()返回false

<script type="text/javascript">
function Submit(){
document.getElementById("try").innerHTML="It worked";   
return false;
}
</script>

在HTML中使用return

<button type="Submit" onclick="return Submit()">Submit</button>

在javascript中，当任何事件处理程序返回false时，将停止事件执行。

Answer 2

您遇到的问题是由于您的标记，主要是这一段:

<button type="Submit" onclick="Submit()">Submit</button>

您已经指定该按钮应该在单击时执行表单提交，因此javascript触发，更改文本并重新加载页面(发生post back)。

要解决这个问题，您可以实现以下更改之一:

• 把你的标记改成一个触发javascript的按钮:

<input type="button" onclick="Submit()">Submit</input>

• 在你的javascript中添加一个语句来取消提交按钮的默认动作:

event.preventDefault(); MDN Link

Answer 3

表单已经提交，这就是为什么你只看到"It worked"一秒钟(如果有的话)。

你的函数不是阻止表单提交。

可以使用表单的onsubmit属性来指定在表单提交之前调用的函数，并可以通过返回布尔值来决定是否允许

Answer 4

您的表单实际上被提交了:)使用:

<button type="Submit" onclick="Submit(); return false;">Submit</button>

Answer 5

我没有看到FORM标签但是如果你这样做:

<form action="javascript:" onsubmit="Submit()">

函数Submit将被调用，仅此而已。使用input type="submit"的好处是您的用户可以通过点击Enter提交表单，而不必自己管理它。