Class name aynı olan Inputlar Value Toplama

07-07-2023, 13:39:27

Kimlik doğrulama veya yönetimden onay bekliyor.

Merhaba inputların class name fiyat
<input type="number" class="fiyat">
<input type="number" class="fiyat">
<input type="number" class="fiyat">
<input type="number" class="fiyat">

html sayfasında class name fiyat olan inputların değerini bulup toplatıp

<span id="sonuc">0</span>

id sonuc olan spana yazdırma işlemini javascript ile nasıl yapılabilir.

07-07-2023, 13:43:42

#2

thealiyasar

<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">

<span id="sonuc">0</span>

  function toplamHesapla() {
    var fiyatlar = document.getElementsByClassName("fiyat");
    var toplam = 0;

    for (var i = 0; i < fiyatlar.length; i++) {
      var fiyat = parseFloat(fiyatlar[i].value);
      if (!isNaN(fiyat)) {
        toplam += fiyat;
      }
    }

    document.getElementById("sonuc").innerText = toplam;
  }

07-07-2023, 13:47:04

#3

mzeydsavluk

<!DOCTYPE html>
<html>
<head>
    <title>Fiyatların Toplamı</title>
</head>
<body>
    <input type="number" class="fiyat">
    <input type="number" class="fiyat">
    <input type="number" class="fiyat">
    <input type="number" class="fiyat">

    <span id="sonuc">0</span>

    <script>
        // Fiyat inputlarını seç
        var inputs = document.getElementsByClassName('fiyat');

        // Her bir input için değer değiştiğinde işlem yap
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].addEventListener('input', function() {
                // Fiyatların toplamını hesaplamak için gereken değişkenleri tanımla
                var sonuc = 0;

                // Her inputun değerini al ve toplama ekle
                for (var j = 0; j < inputs.length; j++) {
                    var value = parseFloat(inputs[j].value); // Input değerini sayıya dönüştür
                    sonuc += isNaN(value) ? 0 : value; // Eğer değer sayı değilse, sıfır olarak kabul et
                }

                // Toplam sonucu "sonuc" id'sine sahip spana yazdır
                document.getElementById('sonuc').textContent = sonuc;
            });
        }
    </script>
</body>
</html>

07-07-2023, 14:38:40

#4

antrode

Mantığını anladım sağolun teşekkürler

07-07-2023, 14:39:24

#5

antrode

thealiyasar adlı üyeden alıntı: mesajı görüntüle

<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">
<input type="number" class="fiyat" onchange="toplamHesapla()">

<span id="sonuc">0</span>

  function toplamHesapla() {
    var fiyatlar = document.getElementsByClassName("fiyat");
    var toplam = 0;

    for (var i = 0; i < fiyatlar.length; i++) {
      var fiyat = parseFloat(fiyatlar[i].value);
      if (!isNaN(fiyat)) {
        toplam += fiyat;
      }
    }

    document.getElementById("sonuc").innerText = toplam;
  }

teşekkürler