js点击获取当前li标签的index值

以你之姓@ 2022-07-17 00:17 292阅读 0赞

在之前面试的时候，笔记的环节总是碰到用原生js弹出当前点击li的indx值，今天没事就写一下，留作记忆！

下面是html机构，为了省事我就不加id class了。

接下来就是js部分了

如果 你把js代码放到了头部，一定要记得加window.οnlοad=function()\{\}  ![SouthEast][]

放到头部，不加这段代码的话会点击没有反应，或者直接报错：

Uncaught TypeError: Cannot set property 'onclick' of null;

后来在 [stackoverflow][] 找到了原因。要是对DOM操作的话，要先加载完全。扯的有点远了啊！

接下换一个写法：

最后附上完整代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		li{
    			background-color: red;
    		}
    	</style>
    	<script type="text/javascript">
    		window.οnlοad=function(){
    			
    			var list =document.getElementsByTagName('li');
    				for(var i=0;i<list.length;i++){
    					list[i].onclick =	(function(n){
    						return function(){
    							alert(n);
    						}
    					})(i)
    	  		}
    	  	}
      	}
    	</script>
    </head>
    <body>
    	<ul>
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    		<li>5</li>
    	</ul>
    </body>
    </html>

[SouthEast]: /images/20220717/663a2fed8dc14c8a8f2f7cba36480216.png
[stackoverflow]: http://stackoverflow.com/questions/17080502/uncaught-typeerror-cannot-set-property-onclick-of-null