为什么innerHTML更改在执行时立即恢复?

Question

我是一个时间转换应用程序的初学者。目前，该应用程序将值输入表单，然后使用ID "convDate"更改h2元素。到输入值* 2，然后在h2元素中显示结果。

应用程序确实成功运行，但该值立即从屏幕上消失。如果我在单击按钮的同时按住CTRL，同时在新选项卡中打开相同的页面，则更改确实会坚持。我用Brave和Firefox都试过了。

谁能解释一下为什么会发生这种情况?欢迎提供任何信息。虽然，请注意，我不是在找人来完成应用程序。我试图理解的概念。

谢谢!

<h1>64 Bit Unix Time Converter</h1>
<form>
<input id='unixTime' type='text'>
<button class='button' onclick='convert()'>Convert</button>
<h3>Value: </h3>
<h2 id='convDate'></h2>
</form>
<script>
function convert() {
var entValue = document.getElementById('unixTime').value;
var conValue = document.getElementById('convDate').value;
document.getElementById("convDate").innerHTML = (entValue * 2);
};
</script>

Answer 1

问题是你的按钮。当一个按钮被添加到表单中时，默认情况下它总是会提交表单。

有几种方法可以解决这个问题:

只需添加type="button">按下你的按钮，它就会停止。

不使用表单标签，因为你没有提交任何东西，也可以解决这个问题。

Answer 2

您正在使用提交页面的form。由于您正在运行一个函数，并且在技术上没有提交任何内容，因此您可以将其设置为div并保持在同一页面上。

<h1>64 Bit Unix Time Converter</h1>
<div>
<input id='unixTime' type='text'>
<button class='button' onclick='convert()'>Convert</button>
<h3>Value: </h3>
<h2 id='convDate'></h2>
</div>
<script>
function convert() {
var entValue = document.getElementById('unixTime').value;
var conValue = document.getElementById('convDate').value;
document.getElementById("convDate").innerHTML = (entValue * 2);
};
</script>

Answer 3

这是因为html代码在<form>标签内。提交后，代码正在寻找一个链接去。如果您将其包装在<div>元素而不是<form>元素中，这个问题将得到解决，就像这样

<h1>64 Bit Unix Time Converter</h1>
<div>
<input id='unixTime' type='text'>
<button class='button' onclick='convert()'>Convert</button>
<h3>Value: </h3> <h2 id='convDate'></h2>
</div> 

<script>

function convert(){ 
var entValue = document.getElementById('unixTime').value; 
var conValue = document.getElementById('convDate').value;
document.getElementById("convDate").innerHTML = (entValue * 2);
};

</script>

这很好