v2.5.2
Giriş yap

Javascript Çarpma İşlemi NaN Hatası

262efe
738 defa görüntülendi

Merhaba, ben input'tan bir değeri alıp bir sayıyla çarpmak istiyorum ancak işlemi yaptığımda sonuç NaN olarak çıkıyor bunu nasıl çözebilirim.

ebykdrms
818 gün önce

Merhaba @262efe.
Input'tan aldığın değerler varsayılan olarak string türündedir. Input'tan gelen değerin sayı olup olmadığını isNaN() fonksiyonuyla test edebilirsin. Sonra da Number() fonksiyonuyla bu değeri sayıya çevirmelisin. Daha sonra işleme sokabilirsin. Eğer bölme işlemi yapacaksan bölen sayının sıfır olmadığına emin olmalısın çünkü sıfıra bölümler de NaN döner.
Input'tan aldığın verinin bir sayıyla çarpımıyla ilgili örnek:

<input id=userNumber type=number placeholder="Bir sayı girin" />
<button id=calculationButton>Hesapla</button>
<div id=resultArea></div>
// Butonu id attribute'si ile seçiyorum ve $calculationButton adlı değişkene atıyorum.
// Zorunlu değil ama bir elementi değişkene atıyorsak değişken adını $ işaretiyle başlatırız.
const $calculationButton = document.getElementById("calculationButton");

// input elementini de bir değişkene alıyorum.
const $userNumber = document.getElementById("userNumber");

// Sonucu yazacağımız div elementini de bir değişkene alıyorum.
const $resultArea = document.getElementById("resultArea");

// input'a girilen sayıyı hangi sayıyla çarpacağımızı da belirleyelim.
const constantNumber = 2;

// Butonun click olayını dinliyorum.
$calculationButton.addEventListener("click", function() {

    // input'taki değeri bir değişkene alıyorum.
    // Bu değişkenin değerini daha sonra değiştireceğim için const yerine let kullanarak oluşturuyorum.
    let inputValue = $userNumber.value;
    
    // Aldığım değerin sayı olup olmadığını kontrol ediyorum.
    // Eğer sayı değilse bir uyarı verip işlem yapılmasını engelliyorum.
    if(isNaN(inputValue)) {
        $resultArea.innerHTML = "Bir sayı değeri girmelisiniz!"; // div'e uyarı mesajını yazdım.
        $userNumber.value = ""; // Input'a yazılan değeri sildim.
        return; // Bu fonksiyonun bu adımdan sonra çalışmamasını sağladım.
    }
    
    // Input sayısal değer içeren bir string'tir.
    // Örneğin "12" bir string'tir ama tamamen sayılardan oluştuğu için
    // isNaN() fonksiyonu bunun bir sayı olduğunu söyler. Biz bunu "12" değil 12 yapacağız:
    inputValue = Number(inputValue);
    
    // Artık güvenle çarpma işlemimizi yapabiliriz.
    // Bölme işlemi yapmayacağımız için sayının 0 olup olmaması önemli değil.
    // Sabit sayımız olan constantNumber ile input'un değeri olan inputValue'yi çarpabiliriz.
    const result = constantNumber * inputValue;
    
    // Bulduğum değeri resultArea id'li div elementine yazıyorum:
    $resultArea.innerHTML = constantNumber + " x " + inputValue + " = " + result;
    
});