A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第15届Android交流区 › 正文

好，新的问题来了...

© 王梁星 中级黑马   /  2012-11-2 21:36  /  3917 人查看  /  24 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 王梁星 于 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（是这样子吗？）。我是检查不出错因了，求助。
复制代码

评分

参与人数 1技术分 +1 收起 理由
杨志 + 1

查看全部评分

的

24 个回复

倒序浏览
陈云展 中级黑马 2012-11-2 21:58:50
| 只看该作者
沙发
  1. var items=document.getElementsByTagName("item");
复制代码
这句话错了。ByTagName是标签。可以改为
  1. var items=document.getElementsByTagName("input");
复制代码

评分

参与人数 1技术分 +1 收起 理由
杨志 + 1

查看全部评分

回复 使用道具 举报
刘伟平 中级黑马 2012-11-2 22:09:34
| 只看该作者
藤椅
你怎么爱用TagName呢？Id是最快的，其他的都需要遍历。
回复 使用道具 举报
王梁星 中级黑马 2012-11-2 22:15:57
| 只看该作者
板凳
刘伟平 发表于 2012-11-2 22:09
你怎么爱用TagName呢？Id是最快的，其他的都需要遍历。

但是ID不好设置阿,用ID可以但要保证ID不重
回复 使用道具 举报
王梁星 中级黑马 2012-11-2 22:17:50
| 只看该作者
报纸
陈云展 发表于 2012-11-2 21:58
这句话错了。ByTagName是标签。可以改为

哈哈,我果然太有才了.我明白了.排错集上又要多个错误排除方法和说明
回复 使用道具 举报
舒远 黑马帝 2012-11-2 22:21:36
| 只看该作者
地板
本帖最后由 舒远 于 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属性值是两码事。

评分

参与人数 1技术分 +1 收起 理由
杨志 + 1

查看全部评分

回复 使用道具 举报
舒远 黑马帝 2012-11-2 22:26:20
| 只看该作者
7#
本帖最后由 舒远 于 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:20
| 只看该作者
8#
刘伟平 发表于 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:49
| 只看该作者
9#
王梁星 发表于 2012-11-2 22:27
我用id的方式了,为什么不行呢?
还有一点,是关于IE和Firefox兼容性的.ff不支持innerHTML的.以后等我弄明白 ...

id必须保证唯一。你这所有的checkbox都用了同样的id肯定不行了哦
回复 使用道具 举报
刘伟平 中级黑马 2012-11-2 22:40:11
| 只看该作者
10#
ID 必须唯一，如果不唯一虽说也不会报错，但是应该只是指定第一个。
NAME是同一类的相同，比如选框列表。

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

回复 使用道具 举报
王梁星 中级黑马 2012-11-2 22:48:05
| 只看该作者
11#
舒远 发表于 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:45
| 只看该作者
12#
舒远 发表于 2012-11-2 22:26
PS：
用jquery框架来做这个直接var items = $("body :checkbox");//这样就取到了全部的checkbox了。推荐学 ...

谢谢指点,有时间了解下jquery.非常感谢
回复 使用道具 举报
王梁星 中级黑马 2012-11-2 22:50:54
| 只看该作者
13#
舒远 发表于 2012-11-2 22:34
id必须保证唯一。你这所有的checkbox都用了同样的id肯定不行了哦

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

给你建议：如果你现在是初学，javascript基础还是不太扎实的情况下先不要考虑兼容性问题。固定用一个浏览器测试即可，最好是IE(就目前而言，企业开发已经不是太关注IE6的兼容性了。一般要求IE8以上的)。IE也自带开发者工具的，可以调试用。
等你基础扎实了。再着重研究兼容性问题，那个时候研究的重点不仅仅是javascript的兼容性，还有css的兼容性。兼容性问题任重而道远也！
哥们，javascript水很深，路很长，加油！
回复 使用道具 举报
舒远 黑马帝 2012-11-2 22:56:13
| 只看该作者
15#
王梁星 发表于 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:45
| 只看该作者
16#
舒远 发表于 2012-11-2 22:56
ID方式来做这个明显不合适。
纯javascript来做的话，应该使用getElementsByName("item")方法而不是getEle ...

明白,我也实验过了
回复 使用道具 举报
王梁星 中级黑马 2012-11-2 23:05:52
| 只看该作者
17#
舒远 发表于 2012-11-2 22:52
给你建议：如果你现在是初学，javascript基础还是不太扎实的情况下先不要考虑兼容性问题。固定用一个浏览 ...

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

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

明白,谢:)指点
回复 使用道具 举报
王陶成 中级黑马 2012-11-2 23:52:42
| 只看该作者
19#
getElementsByTagName()是获取标明名字
getElementsByName() 是获取标签对象的name属性

你可以说使用 getElementsByTagName(“input”)
或者 getElementsByName(“item”)
回复 使用道具 举报
陈云展 中级黑马 2012-11-3 09:00:49
| 只看该作者
20#
请问各位。如何获得技术分呢？刚到这里。不明白。
回复 使用道具 举报
下一页 »
12下一页
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马