How To Get Selected LI Text To Input Text Using Javascript
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:
Share this
Related Posts
JavaScript - Array Navigation Form with JavaScript and HTML
How to Create an Array Navigation Form with JavaScript and HTML
Database Data Navigation in PHP
How to Navigate and Display Database Records Using PHP
In this PHP tutorial,
Javascript Add Edit Delete LI
How To Add, Edit, Remove Selected LI Using Javascript
JavaScript - How to Filter Table Data Between Two Dates
How to Display Table Data Between Two Selected Dates Using JavaScript
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
cheer