为什么我的stepUp/stepDown按钮每次单击都会提交表单

<button type="button" onclick="stepUp()">增加</button>
<button type="button" onclick="stepDown()">减少</button>

<input type="number" id="myInput" value="0">
<button onclick="stepUp(event)">增加</button>
<button onclick="stepDown(event)">减少</button>

<script>
function stepUp(event) {
  event.preventDefault();
  var input = document.getElementById("myInput");
  input.stepUp();
}

function stepDown(event) {
  event.preventDefault();
  var input = document.getElementById("myInput");
  input.stepDown();
}
</script>

<form>
  <input type="number" id="myInput" value="0">
</form>
<div>
  <button onclick="stepUp()">增加</button>
  <button onclick="stepDown()">减少</button>
</div>

<script>
function stepUp() {
  var input = document.getElementById("myInput");
  input.stepUp();
}

function stepDown() {
  var input = document.getElementById("myInput");
  input.stepDown();
}
</script>