本次练习错误总结：

1. for循环要套到按钮的onclick里面，否则onclick点击事件无法依次执行。

2. var n1, var n2 这两个变量是arr.sort排序使用的，所以应该放在sort() 函数里面。

3.arr.sort(function (li1,li2) 这个排序函数的li1, li2表示的是arr[ ] 这个数组里随机的两个数，这个命名和之前的aLi无关。不需要调用aLi为变量。

4. for循环    for ( ) 条件语句末尾一定不能写分号。   分号表示该段运行结束。   条件语句末尾写上分号，for循环的函数就无法依次执行。

注意点：

1. parseInt  把字符串转换为数字，  方便排序。

2. 数组排序。  （a, b）表示该数组中的随机数。

  1. arr.sort (function(a, b)) {
  2.  
  3. };

正确代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>排序</title>
  6.     <script>
  7.         window.onload = function () {
  8.             var oBtn = document.getElementById('btn1');
  9.             var oUl = document.getElementById('ul1');
  10.  
  11.             oBtn.onclick = function () {
  12.                 var aLi = oUl.getElementsByTagName('li');
  13.                 var arr = [];
  14.  
  15.                 for ( var i=0; i<aLi.length; i++){    //for循环的括号后面绝对不能加分号！！！！
  16.                     arr[i] = aLi[i];
  17.                 }
  18.  
  19.                 arr.sort(function (li1,li2) {
  20.                 var n1 = parseInt(li1.innerHTML);
  21.                             var n2 = parseInt(li2.innerHTML);
  22.                             return n1-n2;
  23.                         });
  24.  
  25.                 for (var j=0; j<arr.length; j++) {
  26.                     oUl.appendChild(arr[j]);
  27.                 }
  28.             }
  29.         }
  30.     </script>
  31. </head>
  32. <body>
  33. <input id="btn1" type="button" value="排序">
  34. <ul id="ul1">
  35.     <li>12</li>
  36.     <li>72</li>
  37.     <li>114</li>
  38.     <li>5552</li>
  39.     <li>78</li>
  40.     <li>3</li>
  41. </ul>
  42. </body>
  43. </html>

第一次的错误代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>排序</title>
  6.     <script>
  7.         window.onload = function () {
  8.             var oUl = document.getElementById('ul1');
  9.             var oBtn = document.getElementById('btn1');
  10.             var aLi = oUl.getElementsByTagName('li');
  11.             var arr = [];
  12.  
  13.             for (var i=0; i<aLi.length; i++)  // for循环要套到按钮的onclick里面！！！！
  14.             {
  15.                 arr[i] = aLi[i];
  16.             }
  17.             oBtn.onclick = function ()  //onclick事件在前，for循环在后！
  18.             {
  19.                 var n1 = parseInt(aLi[i].innerHTML)
  20.                 //这两个变量是arr.sort排序使用的，所以应该放在sort函数里面。。
  21.                 //可以试一下放在外面能不能顺利执行
  22.                 var n2 = parseInt(aLi[i].innerHTML)
  23.  
  24.                 arr.sort(function (aLi1,aLi2) { //这个函数的参数怎么写？？
  25.                     return n1-n2;
  26.                 })
  27.             }
  28.         }
  29.     </script>
  30. </head>
  31. <body>
  32. <input id="btn1" type="button" value="排序">
  33. <ul id="ul1">
  34.     <li>266</li>
  35.     <li>115</li>
  36.     <li>86</li>
  37.     <li>6</li>
  38.     <li>420</li>
  39. </ul>
  40. </body>
  41. </html>

JS错误记录 - dom操作 - 排序的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. js练习【DOM操作】

    完成效果: 演示地址:http://codepen.io/anon/pen/jPbYWq HTML: <!DOCTYPE html> <html lang="en" ...

  3. [笔记]原生JS实现的DOM操作笔记

    原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

  4. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  5. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  6. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  7. JS核心之DOM操作 下

    目录: 1.节点类型之Document类型 2.节点类型之Element类型 3.节点类型之Text类型 4.综合小示例 -- 动态添加外部样式文件 5.查找元素的扩展方法 接上篇,我们先来看常用的三 ...

  8. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  9. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

随机推荐

  1. ios发布以后关键信息确认与nslog

    发布以后信息查看的路径: xcode->window->devices and …->查看如图的log. 通常在发布以后,处于安全和性能的考虑,会禁止打印log:但是在关键的信息需要 ...

  2. Linux-CentOS5/6启动流程

    Linux-CentOS5/6启动流程

  3. 阿里云slb上传证书错误

    阿里云上传证书错误 今天在阿里云给slb上传新买的证书,传的过程中报错了,如下: 网上找了半天没找到,鼠标放在错误哪行行首,会报一个错 大意就是一行最多64个字符,我检查了下,报错这行是68个字符,于 ...

  4. 在windows下如何新建爬虫虚拟环境和进行scrapy安装

    Scrapy是Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy吸引人的地方在于它是一个框架,任何人都可以根据需求方便的修改.Sc ...

  5. 3065: 带插入区间K小值_树套树_替罪羊树_权值线段树

    经过周六一天,周一3个小时的晚自习,周二2个小时的疯狂debug,终于凭借自己切掉了这道树套树题. Code: #include <cstdio> #include <algorit ...

  6. vue下载模板、导出excle

    1.下载模板是 下载模版比较简单,就是跳一个新的页面 2.导出excle 就是get请求,把自己要导出的参数一一拼接起来 }

  7. 洛谷1726 上白泽慧音 tarjan模板

    题目描述 在幻想乡,上白泽慧音是以知识渊博闻名的老师.春雪异变导致人间之里的很多道路都被大雪堵塞,使有的学生不能顺利地到达慧音所在的村庄.因此慧音决定换一个能够聚集最多人数的村庄作为新的教学地点.人间 ...

  8. easyui_datagrid使用

    easyui的datagrid显示数据的方式(使用了jQuery) 第一步 创建显示的格式,方法有两种: 第一种:在HTML标签中创建,类似如下的形式,参数可以在标签中设置,也可以在脚本中 这种方式在 ...

  9. MPI对道路车辆情况的Nagel-Schreckenberg 模型进行蒙特卡洛模拟

    平台Ubuntu 16.04,Linux下MPI环境的安装见链接:https://blog.csdn.net/lusongno1/article/details/61709460 据 Nagel-Sc ...

  10. celery 学习

    1. 列出计划的ETA任务(worker) celery -A proj inspect scheduled 参考文档:http://docs.celeryproject.org/en/latest/ ...