JQuery ile Toplama Örneği – Web Tasarım & Programlama
Javascript Jquery

JQuery ile Toplama Örneği

Bu yazımızda JQuery ile text kutularına girilen 2 adet sayının JQuery kullanarak toplayacağız ve yine belirlediğimiz bir text kutusunda sonucu görüntüleyeceğiz.

Örneğimizde kullanacağımız javaScript dosyalarını “js” isimli bir klasörde tutacağız.

jquery-3.1.1.min.js dosyasını aşağıdaki linkten indirebilirsiniz.

https://jquery.com/download/

Bu dosyayı indirdikten sonra toplama.js ve index.html dosyalarını oluşurarak örneğimize başlıyoruz.

İlk olarak index.html dosyasına aşağıdaki gibi input nesnelerini, yani 3 adet text ve 1 adet butonu ekleyeceğiz. Ve body kapatma etiketinden hemen önce “js” klasörümüzde bulunan JavaScript dosyalarımızı tanımlayacağız.

html dosyamızı oluşturduktan sonra  toplama.js dosyamızı oluşturacağız.

 

 

2 Yorum

  • Merhaba sayfamda dört tane aynı name e sahip label var . Bu labeller içinde değişik rakamlar mevcut. Bu rakamları sayfanın yüklenme aşamasında ayrı bir label a toplayıp yazdırmak istiyorum. Yardımcı olur musunuz?

    • Öncelikle şu belirtmek isterim HTML label etiketleri name niteliği almazlar. name yerine class niteliği kullanabilirsin. Soruyu da bu şekilde cevaplıyorum. class niteliği kullanarak label etiketlerini ve içindeki değerleri okuyup başka bir label içinde ekrana yazdırdım.

      <!DOCTYPE html>
      <html lang=”tr”>
      <head>
      <meta charset=”UTF-8″>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
      <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
      <title>yazilimkodlama.com</title>
      </head>
      <body>
      <label class=”sayilar”>10</label>
      <label class=”sayilar”>20</label>
      <label class=”sayilar”>30</label>
      <label class=”sayilar”>40</label><br>
      <label class=”sonuc”></label>
      <script>
      //sayfa yüklendiğinde çalışacak fonksiyon
      window.onload=function(){
      // class=”sayilar” ı oku
      const sayilar=document.querySelectorAll(“.sayilar”);
      const sonuc=document.querySelector(“.sonuc”);
      let toplam=0;
      //sayıları topla
      sayilar.forEach(function(etiket){
      toplam+=Number(etiket.textContent);
      });

      //toplamı yazdır
      sonuc.textContent=toplam;

      }
      </script>
      </body>
      </html>

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box