本次练习错误总结:

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. 2018年湘潭大学程序设计竞赛 Fibonacci进制

    Fibonacci数是非常有名的一个数列,它的公式为 f(n)=f(n-1)+f(n-2),f(0)=1,f(1)=2.  我们可以把任意一个数x表示成若干不相同的Fibonacci数的和, 比如说1 ...

  2. IBM主机上清除告警黄灯方法

    机器亮黄灯告警一般是有硬件问题(单电源等可能有安全隐患的硬件配置也可能造成黄灯亮起),见到后首先进行下硬件诊断,方法如下: 诊断系统,判断是否硬件故障:1.Root用户执行diag: 2.回车后,进第 ...

  3. 移动端(手机端)页面自适应解决方案—rem布局篇

    移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...

  4. scrapy xpath选择器多级选择错误

    在学习scrapy中用xpath提取网页内容时,有时要先提取出一整个行标签内容,再从行标签里寻找目标内容.出现一个错误. 错误代码: def parse(self, response): sel = ...

  5. 【Codeforces Round #423 (Div. 2) C】String Reconstruction

    [Link]:http://codeforces.com/contest/828/problem/C [Description] 让你猜一个字符串原来是什么; 你知道这个字符串的n个子串; 且知道第i ...

  6. Service绑定模式

    Service绑定模式      使用绑定的Service能够实现组件与Service的通信. 组件与被绑定的Service能够不归属于同一个应用程序.因此通过绑定Service能够实现进程间通信. ...

  7. [python]pip坏了怎么办?

    今天,给一位新同事配置pip,用get-pip.py安装之后.出现错误: raise DistributionNotFound(req)  # XXX put more info here pkg_r ...

  8. gym 100735I

    Description standard input/outputStatements You are given three numbers. Is there a way to replace v ...

  9. java command not found

    INSTALLATION PROCEDURE ON RASPBERRY PI The remaining steps should be performed directly on the conso ...

  10. 分享一段wap框架样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...