鱼C论坛

 找回密码
 立即注册
查看: 3287|回复: 2

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

[复制链接]
发表于 2018-4-14 09:55:03 | 显示全部楼层 |阅读模式

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

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

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>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 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>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 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
复制代码

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 23:04

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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