黑马程序员技术交流社区

标题: 好，新的问题来了... [打印本页]
作者: 王梁星    时间: 2012-11-2 21:36
标题: 好，新的问题来了...
本帖最后由 王梁星 于 2012-11-3 17:18 编辑
  1. //jsshangpin.html

  3. <?xml version="1.0" encoding="UTF-8"?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head>
  7.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8.         <title></title>

  10. <script type="text/javascript" >
  11. //1.获取被选中的checkbox，通过checkbox属性的状态完成
  12. //2.获取被选中的chechbox 的对应的金额
  13. //3.累加求和
  14. //4.定义span区存储总金额

  16. function getSum()
  17. {
  18.    var items=document.getElementsByTagName("item");
  19.    var sum=0;
  20.    alert("a");  
  21.   for(var i=0;i<items.length;i++)
  22.   {
  23.      alert("b");
  24.      if(items[i].checked)
  25.        {
  26.                         alert("c");
  27.                         sum+=parseInt(items[i].value);                              
  28.        }  
  29.   }
  30.   alert("d");
  31.   var spanNode=document.getElementById("sum");  
  32.   spanNode.innerHTML=sum+"元";
  33.   alert("e");
  34. }  
  35. </script>
  36. </head>
  37. <body>
  38. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  40. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  42. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  44. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  46. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  48. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  50. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  52. <input type="checkbox" name="item" value="3000" />computer: 3000 yuan

  54. <input type="button" value="get money" onclick="getSum()"/><span id="sum"></span>
  55. </body>
  56. </html>

  58. 我已经家了alert()来排错，for(var i=0;i<items.length;i++)｛｝语句体根本就没有执行！怎么会这样？html是自上往下执行，所以不出问题的话，肯定执行for循环的。但现在for循环没有执行，这就说明for里的第二个参数返回值为false（是这样子吗？）。我是检查不出错因了，求助。
复制代码
作者: 陈云展    时间: 2012-11-2 21:58
  1. var items=document.getElementsByTagName("item");
复制代码
这句话错了。ByTagName是标签。可以改为
  1. var items=document.getElementsByTagName("input");
复制代码
作者: 刘伟平    时间: 2012-11-2 22:09
你怎么爱用TagName呢？Id是最快的，其他的都需要遍历。
作者: 王梁星    时间: 2012-11-2 22:15
刘伟平 发表于 2012-11-2 22:09
你怎么爱用TagName呢？Id是最快的，其他的都需要遍历。

但是ID不好设置阿,用ID可以但要保证ID不重
作者: 王梁星    时间: 2012-11-2 22:17
陈云展 发表于 2012-11-2 21:58
这句话错了。ByTagName是标签。可以改为

哈哈,我果然太有才了.我明白了.排错集上又要多个错误排除方法和说明
作者: 舒远    时间: 2012-11-2 22:21
本帖最后由 舒远 于 2012-11-2 22:42 编辑

var items=document.getElementsByTagName("item");获取到的items是null，调用items.length的时候去取不到值的，程序执行到这里就出错了中断执行了，相当于java里面的NullPointerException了。建议你使用firefox安装firebug来调试一下。就能看出错误。错误提示：'items.length is undefined'
正确的应该按照楼上所说的。var items=document.getElementsByTagName("input");
getElementsByTagName()是根据标签名获取DOM元素。标签名和标签的name属性值是两码事。
作者: 舒远    时间: 2012-11-2 22:26
本帖最后由 舒远 于 2012-11-2 22:32 编辑

PS：
用jquery框架来做这个直接var items = $("body :checkbox");//这样就取到了全部的checkbox了。推荐学习jquery。但是学之前最好将javascript基础掌握好了。学起jquery才能事半功倍。。。

//以下jQuery实现起来非常舒服的。
var sum = 0;
$("body :checkbox:checked").each(function(){
//这里最好用这种方式，如果this.value == 9 || this.value == 8则会出错。这是parseInt内部实现的问题。记住即可。
sum += parseInt(this.value,10);
});
$("#sum").val(sum+"元");
作者: 王梁星    时间: 2012-11-2 22:27
刘伟平 发表于 2012-11-2 22:09
你怎么爱用TagName呢？Id是最快的，其他的都需要遍历。
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.         <title></title>

  8. <script type="text/javascript" >
  9. //1.获取被选中的checkbox，通过checkbox属性的状态完成
  10. //2.获取被选中的chechbox 的对应的金额
  11. //3.累加求和
  12. //4.定义span区存储总金额

  14. function getSum()
  15. {
  16.    //var items=document.getElementsByTagName("input");
  17.    //var items=document.getElementsByName("item");
  18.    var items=document.getElementById("inputid");
  19.    var sum=0;
  20.   for(var i=0;i<items.length;i++)
  21.   {
  22.      if(items[i].checked)
  23.        {
  24.                         sum+=parseInt(items[i].value);                               
  25.        }  
  26.   }
  27.   var spanNode=document.getElementById("sum");  
  28.   spanNode.innerHTML=sum+"元";
  29. }  
  30. </script>
  31. </head>
  32. <body>
  33. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  34. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  35. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  36. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  37. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  38. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  39. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  40. <input type="checkbox" name="item" value="3000" id="inputid" />computer: 3000 yuan<br />
  41. <input type="button" value="get money" onclick="getSum()"/><span id="sum"></span>
  42. </body>
  43. </html>
复制代码
我用id的方式了,为什么不行呢?
还有一点,是关于IE和Firefox兼容性的.ff不支持innerHTML的.以后等我弄明白了,在请教吧.问问题也得做个明白人阿
作者: 舒远    时间: 2012-11-2 22:34
王梁星 发表于 2012-11-2 22:27
我用id的方式了,为什么不行呢?
还有一点,是关于IE和Firefox兼容性的.ff不支持innerHTML的.以后等我弄明白 ...

id必须保证唯一。你这所有的checkbox都用了同样的id肯定不行了哦
作者: 刘伟平    时间: 2012-11-2 22:40
ID 必须唯一，如果不唯一虽说也不会报错，但是应该只是指定第一个。
NAME是同一类的相同，比如选框列表。

tagname是指html标签名，比如DIV,P等等。

作者: 王梁星    时间: 2012-11-2 22:48
舒远 发表于 2012-11-2 22:21
var items=document.getElementsByTagName("item");获取到的items是null，调用items.length的时候去取不到 ...

那我可真悲哀,我宝贝火狐的firebug插件不给里,一开启打开网页慢了5倍.所以不轻易用.用也是在出问题才用的.现主要在虚拟的xp上用IE6+EditPlus看效果并排错的.当然火狐上的效果也必须要看的,随之而来的就是两款浏览器的兼容性问题.兼容性太烦人了,视频上没有讲的.我有是一个比较追求完美的人,不人放过这个问题.单是兼容性问题解决,花了不少时间了....这是个大问题,暂时抛下兼容性问题不管,但我可是也在firefox上测试的呀
作者: 王梁星    时间: 2012-11-2 22:49
舒远 发表于 2012-11-2 22:26
PS：
用jquery框架来做这个直接var items = $("body :checkbox");//这样就取到了全部的checkbox了。推荐学 ...

谢谢指点,有时间了解下jquery.非常感谢
作者: 王梁星    时间: 2012-11-2 22:50
舒远 发表于 2012-11-2 22:34
id必须保证唯一。你这所有的checkbox都用了同样的id肯定不行了哦

请用id的方式该下代码,我可能哪里有没理解好:)
作者: 舒远    时间: 2012-11-2 22:52
王梁星 发表于 2012-11-2 22:48
那我可真悲哀,我宝贝火狐的firebug插件不给里,一开启打开网页慢了5倍.所以不轻易用.用也是在出问题才用的 ...

给你建议：如果你现在是初学，javascript基础还是不太扎实的情况下先不要考虑兼容性问题。固定用一个浏览器测试即可，最好是IE(就目前而言，企业开发已经不是太关注IE6的兼容性了。一般要求IE8以上的)。IE也自带开发者工具的，可以调试用。
等你基础扎实了。再着重研究兼容性问题，那个时候研究的重点不仅仅是javascript的兼容性，还有css的兼容性。兼容性问题任重而道远也！
哥们，javascript水很深，路很长，加油！
作者: 舒远    时间: 2012-11-2 22:56
王梁星 发表于 2012-11-2 22:50
请用id的方式该下代码,我可能哪里有没理解好

ID方式来做这个明显不合适。
纯javascript来做的话，应该使用getElementsByName("item")方法而不是getElementsByTagName("item")方法。
以下是checkbox的标签声明：
<input type="checkbox" name="item" value="3000" />
<input type="checkbox" name="item" value="3000" />
<input type="checkbox" name="item" value="3000" />
<input type="checkbox" name="item" value="3000" />
<input type="checkbox" name="item" value="3000" />
...
<input type="checkbox" name="item" value="3000" />
作者: 王梁星    时间: 2012-11-2 23:03
舒远 发表于 2012-11-2 22:56
ID方式来做这个明显不合适。
纯javascript来做的话，应该使用getElementsByName("item")方法而不是getEle ...

明白,我也实验过了
作者: 王梁星    时间: 2012-11-2 23:05
舒远 发表于 2012-11-2 22:52
给你建议：如果你现在是初学，javascript基础还是不太扎实的情况下先不要考虑兼容性问题。固定用一个浏览 ...

据说整个IT水都深的不得了阿,--看论坛语气我感觉这水深的不得了

我考虑下把IE6升级到IE8
作者: 王梁星    时间: 2012-11-2 23:16
刘伟平 发表于 2012-11-2 22:40
ID 必须唯一，如果不唯一虽说也不会报错，但是应该只是指定第一个。
NAME是同一类的相同，比如选框列表。

明白,谢:)指点
作者: 王陶成    时间: 2012-11-2 23:52
getElementsByTagName()是获取标明名字
getElementsByName() 是获取标签对象的name属性

你可以说使用 getElementsByTagName(“input”)
或者 getElementsByName(“item”)
作者: 陈云展    时间: 2012-11-3 09:00
请问各位。如何获得技术分呢？刚到这里。不明白。
作者: 王梁星    时间: 2012-11-3 11:59
陈云展 发表于 2012-11-3 09:00
请问各位。如何获得技术分呢？刚到这里。不明白。

不想回答问题，那就把你的问题发在这里。有人负责给技术分的。其他得分途径有没有或是怎么得，暂时不清楚。
作者: 陈云展    时间: 2012-11-3 12:33
王梁星 发表于 2012-11-3 11:59
不想回答问题，那就把你的问题发在这里。有人负责给技术分的。其他得分途径有没有或是怎么得，暂时不清楚 ...

什么叫不想回答问题呀。这第一个给你解决的问题。这孩子。
作者: 王梁星    时间: 2012-11-3 17:17
陈云展 发表于 2012-11-3 12:33
什么叫不想回答问题呀。这第一个给你解决的问题。这孩子。

:handshake我没表达好我的意思，致歉:lol
作者: 陈云展    时间: 2012-11-3 17:45
王梁星 发表于 2012-11-3 17:17
我没表达好我的意思，致歉

呵呵。没关系的。:)
作者: 王梁星    时间: 2012-11-3 21:00
陈云展 发表于 2012-11-3 17:45
呵呵。没关系的。

:lol共勉吧



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2