JS button 不同用法疑惑
遇到个新问题，各位老司机看看，在JS里写button功能的时候，发现不同的button写法，对最后的结果有不同表现，如：写法1:
<button name = "btn01">Press this button</button>
写法2：
<input type = "button" name = "btn01" value = "Press this button"></input>
具体例子（在网页中写了个简单的计算器程序）
<html>
<head>
<title>Math Fun</title>
<script>
function registerEvents()
{
document.mathWiz.buttonM.addEventListener('click', doTheMath, false);
}
function doTheMath()
{
var first = parseInt(document.mathWiz.firstnumber.value);
var second = parseInt(document.mathWiz.secondnumber.value);
var operator = document.mathWiz.operator.value;
switch (operator)
{
case "add":
var result = first + second;
break;
case "subtract":
var result = first - second;
break;
case "multiply":
var result = first * second;
break;
case "divide":
var result = first / second;
break;
}
document.mathWiz.theResult.value = result;
}
</script>
</head>
<body onload = "registerEvents();">
<form name = "mathWiz">
<label>First Number: <input type = "number" name = "firstnumber"></label><br>
<lable>Second Number: <input type = "number" name = "secondnumber"></lable><br>
<label>Operator:
<select name = "operator">
<option value = "add"> + </option>
<option value = "subtract"> - </option>
<option value = "multiply"> * </option>
<option value = "divide"> / </option>
</select>
</label>
<br>
<!--
<button name = "buttonM">Do the Math!</button><br>
-->
<input type = "button" name = "buttonM" value = "Do the Math!"><br>
<label>Result: <input type = "number" name = "theResult"></label><br>
</form>
</body>
</html>
程序显示如下图：
如果button功能使用被注释的那个写法：
<button name = "buttonM">Do the Math!</button><br>
那么结果会一闪而过，而使用<input>内置button的写法，则结果正常。
网上简要搜索了下，说是input button可以将结果传递过去，而直接用button的写法则不行。
希望有经验的小伙伴可以解惑，感谢！ 我怎么试了2种方法都没问题啊，不过你得把onclick事件写上。
<html>
<head>
<title>Math Fun</title>
<script>
function registerEvents()
{
document.mathWiz.buttonM.addEventListener('click', doTheMath, false);
}
function doTheMath()
{
var first = parseInt(document.mathWiz.firstnumber.value);
var second = parseInt(document.mathWiz.secondnumber.value);
var operator = document.mathWiz.operator.value;
switch (operator)
{
case "add":
var result = first + second;
break;
case "subtract":
var result = first - second;
break;
case "multiply":
var result = first * second;
break;
case "divide":
var result = first / second;
break;
}
document.mathWiz.theResult.value = result;
}
</script>
</head>
<body onload = "registerEvents();">
<form name = "mathWiz">
<label>First Number: <input type = "number" name = "firstnumber"></label><br>
<lable>Second Number: <input type = "number" name = "secondnumber"></lable><br>
<label>Operator:
<select name = "operator">
<option value = "add"> + </option>
<option value = "subtract"> - </option>
<option value = "multiply"> * </option>
<option value = "divide"> / </option>
</select>
</label>
<br>
<button onclick="doTheMath()" name = "buttonM">Do the Math!</button><br>
<!-- <input onclick="doTheMath()" type = "button" name = "buttonM" value = "Do the Math!"><br> -->
<label>Result: <input type = "number" name = "theResult"></label><br>
</form>
</body>
</html> 本帖最后由 ataehee 于 2018-4-14 15:23 编辑
alltolove 发表于 2018-4-14 11:20
我怎么试了2种方法都没问题啊，不过你得把onclick事件写上。
我录了个简单的视频 你看下 我浏览器用的是google chrome，你用的什么浏览器，是正常显示？
https://v.qq.com/x/page/i0629oild6h.html
页:
[1]