Javascript 单击按钮时，将重新加载页面，而不是调用函数

我为一个游戏制作了一个计算器，并制作了一个如下按钮：

<button onclick="myFunction()">Calculate</button>

这里是一个标签，我想在这里提供最终答案。 当我单击按钮时，它应该运行函数“myFunction（）”，但它没有。相反，它刷新页面，输入的所有数据都消失了。 你能告诉我为什么会这样吗？ 提前感谢：）

每战成本计算器
.小一点{
宽度：50px；
填充：12px 10px；
边际：0px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
.更大{
宽度：110px；
填充：12px 10px；
边际：0px0；
显示：内联块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
}
钮扣{
宽度：110px；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
边际：0px0；
边界：无；
边界半径：4px；
光标：指针；
}
按钮：悬停{
背景色：#45a049；
}
div{
边界半径：5px；
背景色：#badf6f；
填充：20px；
}
算计
//这是上面的脚本

默认情况下，按钮将提交表单。要修复它，您需要

返回false

onclick="myFunction(); return false;"

在函数中添加param
e
，然后使用just write
e.preventDefault（）
。更多关于

将您的
更改为其他标记，如
或
。它看起来不像一个按钮，但在功能上它会做你想要的。如果需要，可以使用css为div设置样式，使其看起来更像按钮

<center><span onclick="myFunction()">Calculate</span></center>

计算
HTML的其余部分在哪里？我猜你的按钮在
中。单击表单中的按钮将提交该表单。@MikeC yes按钮位于表单中。它不应该在那里吗？顺便说一句，用html更新了代码，除非你打算向服务器提交一些数据，否则你不应该有表单。只要去掉包装代码的表单就可以了。@MikeC它现在有html了。那么表单只用于将数据传输到服务器？难道它们不能用在一个普通的网站上吗？没有什么能阻止你使用它，但也没有意义。这就像把泳衣带进电影院。没有人会告诉你不，但你不会在那里游泳。我知道OP把它放在了他们的代码中，但值得一提的是
onclick="myFunction(); return false;"

myFunction(e){
    e.preventDefault();
    //rest of your code
}

<center><span onclick="myFunction()">Calculate</span></center>