转行前端自我学习养成记之js学习记录篇——表单杂记

HTML表单输入类型——submit
不求甚解的学习总是会带来很多坑，今天在回顾之前写过的一些HTML文件，看到一个猜数字的游戏，就是系统随机生成1~100的随机整数，然后输入数字比对是否相同，相同则结束，不同则继续，这里就用到了表单类型里的type='number'跟type='button'。

enter a number:

<form action='' method='GET'>

    <input type="number" name="" value="" placeholder="enter a number" required/>

    <input type='button' id="button" value='submit'>

</form>

button类型的表单只是单纯的一个按钮类型，可以通过JS增加事件，由于游戏只需要判断数字相同与否，所以用button来触发事件再好不过了。

问题就在于，不知道什么时候，我把type改成了“submit”！！！

enter a number:

<form action='' method='GET'>

    <input type="number" name="" value="" placeholder="enter a number" required/>

    <input type='submit' id="button" value='submit'>

</form>

JS部分代码如下：

var input=document.querySelector("input");

var tip=document.getElementById("tip");

var showNum=document.getElementById("showNum");

var btn=document.getElementById("button");

var num=Math.floor(Math.random()*100);

var startGame=document.getElementById("startGame");

function game(){

var inputNum=parseInt(input.value);
showNum.innerHTML+=inputNum+", ";
if(num==inputNum){
tip.innerHTML="恭喜你猜对了!!!";
tip.style.color="red";
setGameOver();
}
if(num>inputNum){
tip.innerHTML="数字过小~";
}
if(num<inputNum){
tip.innerHTML="数字过大~";
}
input.value="";
input.focus();

}

btn.onclick=function(){
game();

}

然后问题就来了，submit类型的表单，浏览器会根据表单的action属性提供的地址请求数据交互，每次请求，都会刷新一次页面，所以只要点击这个submit类型的按钮，页面都会刷新一次，浏览器也就会重新加载标签元素与相应的JS CSS。所以如果是type=‘submit’的话，每次我点按钮，数字比对过后，页面都会刷新，所以，我永远也不会得到答案，也看不到点击之后的JS内容，页面都是刷新重新加载。开始真的很崩溃，怎么排查都不知道问题在哪，按钮触发的函数明明没有问题，JS逻辑没问题，console控制台也没有报错，直到我度娘了一把，看到了有人同样遇到的情况，才知道，原来是submit类型惹的祸！！！只要改了类型，不提交数据，页面不刷新，一切都顺利了，所以终于明白了submit跟button的区别的，开始的时候觉得都差不多，没深究，在这种小问题里就被坑了，所以还是需要仔细斟酌每个知识点啊