input elementi üzerinden değer girip enter tuşuna bastığımızda bir sıralı liste oluşturmaya yarayan javascript kodudur.
index.html
<!doctype html>
<html lang="tr-TR">
<head>
<meta charset="UTF-8">
<title>input İle Değer Girerek Liste Oluştur - Javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<!-- Liste öğeleri bu input aracılığıyla eklenecek. -->
Liste Öğesi Ekle<br><input type="text" id="veri" />
<!-- Liste bu div içinde oluşturulacak. -->
<div id="alan"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css
#alan {
background-color: #50babf;
width:30%;
padding:10px;
margin-top:20px;
border:1px solid #ddd;
border-radius: 5px;
}
#sirali-liste {
background-color:lightgreen;
border-radius: 5px;
}
script.js
document.getElementById("veri").addEventListener(
'keydown',
function listeOlustur(e) {
if (e.keyCode == 13) {
var veri = document.getElementById("veri");
if(document.getElementById("sirali-liste") === null) {
var olElement = document.createElement("ol");
olElement.id = "sirali-liste";
document.getElementById("alan").appendChild(olElement);
}
var liElement = document.createElement("li");
liElement.innerHTML = veri.value;
document.getElementById("sirali-liste").appendChild(liElement);
veri.value = "";
veri.focus();
}
}
);
script.js (Açıklamalı)
//--------------------------------------------------
//"veri" id değerine sahip elemente keydown olayı
//ekliyoruz. Bu dosyada veri id değerine sahip
//element bir input ve biz input üzerindeyken enter
//tuşuna her bastığımızda liste öğesi eklensin ve
//input elementine yeniden odaklanılsın isityoruz.
//keydown olayı bize bu konuda yardımcı olacak.
//--------------------------------------------------
document.getElementById("veri").addEventListener(
'keydown',
function listeOlustur(e) {
//--------------------------------------------------
//Enter tuşuna basıldığında işlem yap.
//--------------------------------------------------
if (e.keyCode == 13) {
var veri = document.getElementById("veri");
//--------------------------------------------------
//Eğer "sirali-liste" id değerine sahip bir element
//yoksa işlem yap. Bir ol elementi oluştur ve id
//değerini bu ol elementine ata. Oluşturulan bu
//ol elementini "alan" id değerine sahip elemente
//ekle.
//--------------------------------------------------
if(document.getElementById("sirali-liste") === null) {
var olElement = document.createElement("ol");
olElement.id = "sirali-liste";
document.getElementById("alan").appendChild(olElement);
}
//--------------------------------------------------
//li elementi oluştur ve bu elemente "veri" id
//değerine sahip elementten gelen value değerini
//ata. Son olarak bu elementi "sirali-liste" id
//değerine sahip elemente ekle.
//--------------------------------------------------
var liElement = document.createElement("li");
liElement.innerHTML = veri.value;
document.getElementById("sirali-liste").appendChild(liElement);
//--------------------------------------------------
//"veri" id değerine sahip input'un value
//değerini sil ve bu input'a yeniden odaklan.
//--------------------------------------------------
veri.value = "";
veri.focus();
}
}
);
Konu ile ilgili örnek dosyayı bu bağlantıdan indirebilirsiniz: İndir