js修改不了input的值

奇怪的input

今天想做一个通过点击按钮，修改input值的控件，但是点击按钮后，input值变成修改的值后又变回了原来的值，百思不得其解，代码如下

<form>
<div class="input-num">
    <input type="text" value="1" id="num">
    <button class="add" id="add" >+</button>
    <button class="dec" id="dec" >-</button>
</div>
</form>
<script type="text/javascript">
11q
    var add = document.getElementById('add');
    var dec = document.getElementById('dec');
    var num = document.getElementById('num'); 
    add.onclick = function(){
        num.value ++;
    }
    dec.onclick = function(){
        num.value --;
    }
</script>   

效果如下：

input框的值一直是1

问题在哪

后来查文档才知道，原来button的默认type是submit，如果不明确指定type，每次点击按钮都会自动刷新页面，所以input的值一直是1。修改方法就是把button的type显式设置为button。