JavaScript Toplama Örneği

Bu örneğimizde sayfamıza eklediğimiz form da bulunan text elemanlarından kullanıcının girmiş olduğu sayıları alıp toplayacağız ve sonucu sayfada belirlediğimiz div öğesine yazdıracağız. Bu işlemleri sayfamıza eklediğimiz bir button sayesinde gerçekleştireceğiz.

Örneğimizde öncelikle Html kısmında 2 adet text ve 1 adet buttonu sayfamıza yerleştireceğiz. Daha sonra <script>..</script> etiketleri arasına Girilen 2 sayının toplanarak yazdırılmasını sağlayacak kodları oluşturacağız.

Sayfaya ait kodlar ve ekran çıktısı:


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>JavaScript Toplama Örneği</h1>
        <form name="toplam">
            <label>1. Sayı : </label>
            <input type="text" id="sayi1"><br><br>
            <label>2. Sayı : </label>
            <input type="text" id="sayi2"><br><br>
            <input type="button" id="btnHesap" value="HESAPLA">
        </form>
        <br>
        <div id="kutuToplam"></div>
        
        <script>      
            var btn=document.getElementById("btnHesap");
            btn.onclick=function(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var sonuc=s1+s2;
                document.getElementById("kutuToplam").innerHTML="Sonuç : "+sonuc;
            }
        </script>
    </body>
</html>