jQuery Dizi Kullanım Örneği

Bu yazımızda jQuery ile Dizi kullanımı ile ilgili bir örnek oluşturacağız. Örneğimizde bir dizi oluşturarak “EKLE” butonu ile text kutusuna girilen değerin diziye eklenmesini ve “LİSTELE” butonuna basıldığında listelenmesini sağlayacağız. Dizi içindeki değerleri listelemek için For Döngüsünden faydalanacağız.

.html sayfasına ait kodlar:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>
        #sonuc{
            color:crimson;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<h2>jQuery Dersleri </h2>

    <input type="text" id="txtad">
    <input type="button" value="EKLE" id="btn1">
    <input type="button" value="LİSTELE" id="btn2">
    

    <div id="sonuc"></div>
    <script>
        $(document).ready(function(){
            var isimler=[];
            $("#btn1").click(function(){
                isimler.push($("#txtad").val());
            });
                 
            

            $("#btn2").click(function(){
               for(var i=0;i<isimler.length;i++)
                   {
                       $("#sonuc").append(isimler[i]+" ");
                   }
            });
            
        });
    </script>
</body>
</html>