How To Update The Selected LI From An UL Using Javascript [ with source code ]

In This Javascript Tutorial we will See How To Edit The Selected <li> Text Value Using Input Text On Button Click Event And Array To Get LI Index In JS And Netbeans Editor .

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

Project Source Code:

  
<!DOCTYPE html>
<html>
    <head>
        <title>javascript: edit selected LI</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
       
        <input type="text" id="txt"><button onclick="editLI()">Edit</button>
        <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"),
                inputText = document.getElementById("txt"),
                 tab = [], liIndex ;
         
         // populate tab with li value
         for(var i = 0; i < items.length; i++)
         {
             tab.push(items[i].innerHTML);
         }
         
         // get selected li into text fields and get the index
         
         for(var i = 0; i < items.length; i++)
         {
             items[i].onclick = function(){
                 
                 inputText.value = this.innerHTML;
                 liIndex = tab.indexOf(this.innerHTML);
                 console.log(this.innerHTML +" INDEX = " + liIndex);
                 
             };
         }
        
         function editLI()
         {
             items[liIndex].innerHTML = inputText.value;
             
              // clear array
              tab.length = 0;
             
              // fill array
             for(var i = 0; i < items.length; i++)
            {
             tab.push(items[i].innerHTML);
            }
         }
            
            
        </script>
        
    </body>
</html>

#js #javascript