How To Get The Selected LI's Index From An UL Using Javascript [with source code]

In This Javascript Tutorial we will See How To Get The Selected <li> Item From An Unordered List <ul> And Display The Index Value On LI Click Using Array In JS And Netbeans Editor .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: get selected LI index</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <ul id="list">
            <li>JS</li>
            <li>PHP</li>
            <li>Java</li>
            <li>C#</li>
            <li>c++</li>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
        
        
        <script>
            
            var items = document.querySelectorAll("#list li"),
                tab = [], index;
        
        // add values to the array
        for(var i = 0; i < items.length; i++){
           tab.push(items[i].innerHTML);
         }
        
        // get selected element index
        for(var i = 0; i < items.length; i++)
        {
            items[i].onclick = function(){
               
               index = tab.indexOf(this.innerHTML);
               console.log(this.innerHTML + " Index = " + index);
        
            };
        }
            
        </script>
        
    </body>
</html>

#javascript #js