JavaScript Get Selected LI Text

How To Get Selected LI Text To Input Text Using Javascript  

Get Selected <LI> Text In JS


In This Javascript Tutorial we will See How To Get Display The Selected <li> Text Value From An <UL> List And Display The Value Into An Input Text On LI Item Click Event In JS And Netbeans Editor .


Project Source Code:

    
<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: get selected li from ul</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <input type="text" id="txt">
        
        <ul id="list">
            <li>JS</li>
            <li>PHP</li>
            <li>Java</li>
            <li>C#</li>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
        
        <script>
            
            var items = document.querySelectorAll("#list li");
            
            for(var i = 0; i < items.length; i++)
            {
                items[i].onclick = function(){
                    
                    document.getElementById("txt").value = this.innerHTML;
                    
                };
            }
            
        </script>
        
    </body>
</html>





OUTPUT:



display <li> text into input text in javascript




Share this

Related Posts

Previous
Next Post »