QQ登录

只需一步,快速开始

登录 | 立即注册 | 找回密码

主题

帖子

荣誉

新鱼友

Rank: 1

积分
33
查看: 93|回复: 2

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

[复制链接]
最佳答案
0 
累计签到:3 天
连续签到:1 天
ataehee 发表于 2018-4-14 09:55:03 932 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
遇到个新问题,各位老司机看看,在JS里写button功能的时候,发现不同的button写法,对最后的结果有不同表现,如:
写法1:
  1. <button name = "btn01">Press this button</button>
复制代码

写法2:
  1. <input type = "button" name = "btn01" value = "Press this button"></input>
复制代码


具体例子(在网页中写了个简单的计算器程序)

  1. <html>
  2. <head>
  3. <title>Math Fun</title>
  4. <script>
  5.         function registerEvents()
  6.         {
  7.                 document.mathWiz.buttonM.addEventListener('click', doTheMath, false);
  8.         }
  9.         function doTheMath()
  10.         {
  11.                 var first = parseInt(document.mathWiz.firstnumber.value);
  12.                 var second = parseInt(document.mathWiz.secondnumber.value);
  13.                 var operator = document.mathWiz.operator.value;

  14.                 switch (operator)
  15.                 {
  16.                         case "add":
  17.                         var result = first + second;
  18.                         break;

  19.                         case "subtract":
  20.                         var result = first - second;
  21.                         break;

  22.                         case "multiply":
  23.                         var result = first * second;
  24.                         break;

  25.                         case "divide":
  26.                         var result = first / second;
  27.                         break;
  28.                 }
  29.                 document.mathWiz.theResult.value = result;
  30.         }
  31. </script>
  32. </head>
  33. <body onload = "registerEvents();">
  34.         <form name = "mathWiz">
  35.         <label>First Number: <input type = "number" name = "firstnumber"></label><br>
  36.         <lable>Second Number: <input type = "number" name = "secondnumber"></lable><br>
  37.         <label>Operator:
  38.         <select name = "operator">
  39.                 <option value = "add"> + </option>
  40.                 <option value = "subtract"> - </option>
  41.                 <option value = "multiply"> * </option>
  42.                 <option value = "divide"> / </option>
  43.         </select>
  44.         </label>
  45.         <br>
  46. <!--
  47.         <button name = "buttonM">Do the Math!</button><br>
  48. -->
  49.         <input type = "button" name = "buttonM" value = "Do the Math!"><br>
  50.         <label>Result: <input type = "number" name = "theResult"></label><br>
  51.         </form>
  52. </body>
  53. </html>
复制代码

程序显示如下图:
Screen Shot 2018-04-14 at 09.51.03.png
如果button功能使用被注释的那个写法:
  1. <button name = "buttonM">Do the Math!</button><br>
复制代码

那么结果会一闪而过,而使用<input>内置button的写法,则结果正常。
网上简要搜索了下,说是input button可以将结果传递过去,而直接用button的写法则不行。
希望有经验的小伙伴可以解惑,感谢!
最佳答案
2018-4-14 11:20:04
我怎么试了2种方法都没问题啊,不过你得把onclick事件写上。

  1. <html>
  2. <head>
  3. <title>Math Fun</title>
  4. <script>
  5.         function registerEvents()
  6.         {
  7.                 document.mathWiz.buttonM.addEventListener('click', doTheMath, false);
  8.         }
  9.         function doTheMath()
  10.         {
  11.                 var first = parseInt(document.mathWiz.firstnumber.value);
  12.                 var second = parseInt(document.mathWiz.secondnumber.value);
  13.                 var operator = document.mathWiz.operator.value;

  14.                 switch (operator)
  15.                 {
  16.                         case "add":
  17.                         var result = first + second;
  18.                         break;

  19.                         case "subtract":
  20.                         var result = first - second;
  21.                         break;

  22.                         case "multiply":
  23.                         var result = first * second;
  24.                         break;

  25.                         case "divide":
  26.                         var result = first / second;
  27.                         break;
  28.                 }
  29.                 document.mathWiz.theResult.value = result;
  30.         }
  31. </script>
  32. </head>
  33. <body onload = "registerEvents();">
  34.         <form name = "mathWiz">
  35.         <label>First Number: <input type = "number" name = "firstnumber"></label><br>
  36.         <lable>Second Number: <input type = "number" name = "secondnumber"></lable><br>
  37.         <label>Operator:
  38.         <select name = "operator">
  39.                 <option value = "add"> + </option>
  40.                 <option value = "subtract"> - </option>
  41.                 <option value = "multiply"> * </option>
  42.                 <option value = "divide"> / </option>
  43.         </select>
  44.         </label>
  45.         <br>

  46.         <button onclick="doTheMath()" name = "buttonM">Do the Math!</button><br>

  47.         <!-- <input onclick="doTheMath()" type = "button" name = "buttonM" value = "Do the Math!"><br> -->
  48.         <label>Result: <input type = "number" name = "theResult"></label><br>
  49.         </form>
  50. </body>
  51. </html>
复制代码
楼层
跳转到指定楼层
最佳答案
39 
累计签到:552 天
连续签到:82 天
alltolove 发表于 2018-4-14 11:20:04 | 显示全部楼层    本楼为最佳答案   
我怎么试了2种方法都没问题啊,不过你得把onclick事件写上。

  1. <html>
  2. <head>
  3. <title>Math Fun</title>
  4. <script>
  5.         function registerEvents()
  6.         {
  7.                 document.mathWiz.buttonM.addEventListener('click', doTheMath, false);
  8.         }
  9.         function doTheMath()
  10.         {
  11.                 var first = parseInt(document.mathWiz.firstnumber.value);
  12.                 var second = parseInt(document.mathWiz.secondnumber.value);
  13.                 var operator = document.mathWiz.operator.value;

  14.                 switch (operator)
  15.                 {
  16.                         case "add":
  17.                         var result = first + second;
  18.                         break;

  19.                         case "subtract":
  20.                         var result = first - second;
  21.                         break;

  22.                         case "multiply":
  23.                         var result = first * second;
  24.                         break;

  25.                         case "divide":
  26.                         var result = first / second;
  27.                         break;
  28.                 }
  29.                 document.mathWiz.theResult.value = result;
  30.         }
  31. </script>
  32. </head>
  33. <body onload = "registerEvents();">
  34.         <form name = "mathWiz">
  35.         <label>First Number: <input type = "number" name = "firstnumber"></label><br>
  36.         <lable>Second Number: <input type = "number" name = "secondnumber"></lable><br>
  37.         <label>Operator:
  38.         <select name = "operator">
  39.                 <option value = "add"> + </option>
  40.                 <option value = "subtract"> - </option>
  41.                 <option value = "multiply"> * </option>
  42.                 <option value = "divide"> / </option>
  43.         </select>
  44.         </label>
  45.         <br>

  46.         <button onclick="doTheMath()" name = "buttonM">Do the Math!</button><br>

  47.         <!-- <input onclick="doTheMath()" type = "button" name = "buttonM" value = "Do the Math!"><br> -->
  48.         <label>Result: <input type = "number" name = "theResult"></label><br>
  49.         </form>
  50. </body>
  51. </html>
复制代码
最佳答案
0 
累计签到:3 天
连续签到:1 天
ataehee  楼主| 发表于 2018-4-14 15:21:40 | 显示全部楼层
本帖最后由 ataehee 于 2018-4-14 15:23 编辑
alltolove 发表于 2018-4-14 11:20
我怎么试了2种方法都没问题啊,不过你得把onclick事件写上。


我录了个简单的视频 你看下 我浏览器用的是google chrome,你用的什么浏览器,是正常显示?
  1. https://v.qq.com/x/page/i0629oild6h.html
复制代码

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐 上一条 /1 下一条

    移动客户端下载(未启用)
    微信公众号

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备11014136号

Copyright 2018 鱼C论坛 版权所有 All Rights Reserved.

Powered by Discuz! X3.1 Copyright
© 2001-2018 Comsenz Inc.    All Rights Reserved.

小黑屋|手机版|Archiver|鱼C工作室 ( 粤公网安备 44051102000370号 | 粤ICP备11014136号

GMT+8, 2018-4-27 16:38

快速回复 返回顶部 返回列表