[已解决]JS button 不同用法疑惑

ataehee · 发表于 2018-4-14 09:55:03

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

遇到个新问题，各位老司机看看，在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的写法则不行。
希望有经验的小伙伴可以解惑，感谢！

最佳答案

月排行榜 / 总排行榜

alltolove

2018-4-14 11:20:04

我怎么试了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>

跳转到最佳答案楼层

alltolove · 发表于 2018-4-14 11:20:04

这个最佳答案由 alltolove 给出，感谢 alltolove 的回答。

单击隐藏图章

我怎么试了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:21:40

本帖最后由 ataehee 于 2018-4-14 15:23 编辑

alltolove 发表于 2018-4-14 11:20
我怎么试了2种方法都没问题啊，不过你得把onclick事件写上。

我录了个简单的视频你看下我浏览器用的是google chrome，你用的什么浏览器，是正常显示？

https://v.qq.com/x/page/i0629oild6h.html

账号		自动登录	找回密码
密码			立即注册