JavaScript Toplama Örneği

Bu örneğimizde JavaScript ile basit bir toplama işlemi yapacağız. Örneğimizde kullanıcıdan form içinde text içerisinde kullanıcıdan 2 adet sayı isteyerek kullanıcının girmiş olduğu bu sayıları toplayarak sayfa içinde belirlediğimiz bir div içerisinde göstereceğiz. “index.html” dosyasına ait kodlar aşağıdaki gibidir.

Code:


<!DOCTYPE html>
<html>
    <head>
        <title>www.yazilimkodlama.com</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>JavaScript Toplama</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="btnTopla" value="TOPLA">
        </form>
        <br>
        <div id="kutuToplam"></div>
        
        <script>
            var btn=document.getElementById("btnTopla");
            btn.onclick=function(){
                var s1=Number(document.getElementById("sayi1").value);
                var s2=Number(document.getElementById("sayi2").value);
                var toplam=s1+s2;
                document.getElementById("kutuToplam").innerHTML="Girilen Sayıların Toplamı : "+toplam;
            }
        </script>
    </body>
</html>