Javascript 函数打印 .innerHTML 但 HTML 在消失之前只出现片刻

Question

我有一个按钮，它调用名为“submit()”的 javascript 函数。 在该函数中，我只需编写 document.getElementById('try').innerHTML="it working"; 测试我的按钮是否将数据传递给函数。

问题是“它有效”在消失之前打印了大约半秒。

我制作了一个完整的表单，使用相同的 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() 中使用 return 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 会触发、更改文本并重新加载页面（发生回发）。

为了解决这个问题，您实施以下更改之一：

• 将您的标记更改为触发 javascript 的按钮：

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

• 在您的 javascript 中添加一条语句，取消提交按钮的默认操作：

event.preventDefault(); MDN 链接

Answer 3

您的表单已提交，这就是为什么您只看到“它有效”一秒钟（如果有的话）。

您的功能不会阻止表单提交。

您可以使用表单的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提交表单，而不必自己管理它。