Javascript

Jquery Input’a Girilen Değerleri Diziye Ekleme

Js İle Diziye Eleman Ekleme

Javascript ile inputa girilen değerler, diziye nasıl eklenir onu paylaşacağım. Jquery’de textbox’a girilen değeri diziye ekleme işlemi butona bastığınızda tamamlanacaktır. Aşağıda canlı demo ve kaynak kodlarıyla birlikte görebilirsiniz.

Canlı Demo


Aşağıdaki kaynak kodlar “Html + CSS + JS “ ile birlikte verilmiştir. Tümünü kopyalayıp “.html” şeklinde kayıt ettiğinizde hemen çalıştırabilirsiniz.

KAYNAK KODLAR İÇİN

<html>
<head>
<TITLE>Jquery İle İnputa Girilen Verileri Diziye Ekleme</TITLE>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.baslik
{
font-weight: 600;
color: darkred;
text-align: center;
}
.kutu
{
  width: 300px;
  height: 100px;
  border: 1px solid darkred;
  box-sizing: content-box;
  word-wrap: break-word;
}
</style>
</head>
<body>
<h2>Dizi'ye Veri Ekle</h2>
    <input type="text" id="inputAd">
    <input type="button" value="DİZİYE EKLE" id="buton1">

 <br><br>
  <div class="kutu">
 <div class="baslik">Dizi'deki Değerler</div><br>
 	<label id="diziCanli"></label>
</div>
<script type="text/javascript">
$(document).ready(function(){
            var dizi=[];
            $("#buton1").click(function(){
                dizi.push($("#inputAd").val());
				$("#diziCanli").append($("#inputAd").val()+","); //
				$("#inputAd").val(""); // Butona basıldığında içeriği temizler
			});
});
</script>
</body>
</html>

İlgili Makaleler

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu