本次练习错误总结：

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）表示该数组中的随机数。

arr.sort (function(a, b)) {

};

正确代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>排序</title>

    <script>

        window.onload = function () {

            var oBtn = document.getElementById('btn1');

            var oUl = document.getElementById('ul1');

            oBtn.onclick = function () {

                var aLi = oUl.getElementsByTagName('li');

                var arr = [];

                for ( var i=0; i<aLi.length; i++){    //for循环的括号后面绝对不能加分号！！！！

                    arr[i] = aLi[i];

                }

                arr.sort(function (li1,li2) {

                var n1 = parseInt(li1.innerHTML);

                            var n2 = parseInt(li2.innerHTML);

                            return n1-n2;

                        });

                for (var j=0; j<arr.length; j++) {

                    oUl.appendChild(arr[j]);

                }

            }

        }

    </script>

</head>

<body>

<input id="btn1" type="button" value="排序">

<ul id="ul1">

    <li>12</li>

    <li>72</li>

    <li>114</li>

    <li>5552</li>

    <li>78</li>

    <li>3</li>

</ul>

</body>

</html>

第一次的错误代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>排序</title>

    <script>

        window.onload = function () {

            var oUl = document.getElementById('ul1');

            var oBtn = document.getElementById('btn1');

            var aLi = oUl.getElementsByTagName('li');

            var arr = [];

            for (var i=0; i<aLi.length; i++)  // for循环要套到按钮的onclick里面！！！！

            {

                arr[i] = aLi[i];

            }

            oBtn.onclick = function ()  //onclick事件在前，for循环在后！

            {

                var n1 = parseInt(aLi[i].innerHTML)

                //这两个变量是arr.sort排序使用的，所以应该放在sort函数里面。。

                //可以试一下放在外面能不能顺利执行

                var n2 = parseInt(aLi[i].innerHTML)

                arr.sort(function (aLi1,aLi2) { //这个函数的参数怎么写？？

                    return n1-n2;

                })

            }

        }

    </script>

</head>

<body>

<input id="btn1" type="button" value="排序">

<ul id="ul1">

    <li>266</li>

    <li>115</li>

    <li>86</li>

    <li>6</li>

    <li>420</li>

</ul>

</body>

</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. Java导出csv修正时间格式

    处理前导出的日期格式为:yyyy-M-d HH:mm 正确的应该是:yyyy-MM-dd HH:mm:ss 处理方案是在 时间数据两边增加 "\t" 有问题欢迎交流. thanks ...

  2. Linux服务器性能评估与优化

    一.影响务器性能因素 影响企业生产环境Linux服务器性能的因素有很多,一般分为两大类,分别为操作系统层级和应用程序级别.如下为各级别影响性能的具体项及性能评估的标准: (1)操作系统级别 内存: C ...

  3. 今日SGU 5.30

    SGU 190 题意:给你个n*n的矩形,然后上面有几个点不能放东西,然后问你能不能用1*2的矩形,把能放 东西的地方放满 收获:一开始想的是,dfs,然后感觉这样的话,代码很长,而且很容易超时, 看 ...

  4. WHU 1548 Home 2-SAT

    ---恢复内容开始--- 题意: N个人想回家在至少一个时刻.至多两个时刻.并且,他们每个人都能独自回家. 定义:ai表示第i个人回家的时间, xij = abs(ai - aj) (i != j). ...

  5. 已知二叉树的中序序列为DBGEAFC，后序序列为DGEBFCA，给出相应的二叉树

    面对这种问题时我们该怎么解决? 今天写数据结构题.发现了一道总是碰见问题的题在这里我写了一种求解方法我自己称它为分层递归求解. 第一步通过观察我们知道后序遍历时最后一个是根节点A 在中序序列中A的左边 ...

  6. cocos2d-js导弹跟踪算法（一边追着目标移动一边旋转角度）

    跟踪导弹 function(targetPosition){ // 让物体朝目标移动的方法 ; var targetPoint = targetPosition; var thisPoint = cc ...

  7. Android Support Library 23.2用法简析

    写在前面的几句话 前几天谷歌发布了android-support-library-23.2支持库,这一次23.2版本增加了一些新的支持库以及新的功能.接下来这篇文章,就是对这些新功能部分做简单的用法介 ...

  8. 1.Apache Axis配置文件WSDD详解

    转自:https://jyao.iteye.com/blog/1285516 1. Aapche Axis的Web Service Deployment Descriptor(WSDD)文件参考文档. ...

  9. POJ 3265 DP

    思路: f[i][j]表示前i天能做j道题 (是做 不是做完) if(f[i-1][k]) if(suma[j]-suma[k]+g[i-1][k]<=n) f[i][j]=1,g[i][j]= ...

  10. Linux常用的安全工具

    Linux常用的安全工具 "工欲善其事,必先利其器".作为一个合格的系统管理员,要应对可能发生的安全事件,掌握Linux下各种必须的安全工具是首要大事.本文主要介绍Linux上常用 ...