jQuery Yazılı Ortalaması Hesaplama

Bu örneğimizde jQuery ile kullanıcının girmiş olduğu iki yazılı notunun ortalamasını hesaplayarak ekranda div öğesi içinde geöstereceğiz. Aynı zamanda ortalamanın 50 ve üzeri olması durumunda ekranda “Yeşil” renkte “GEÇTİ“, 50′ den düşük olması durumunda ise ekranda “Kırmızı” renkte “KALDI” yazdıracağız.

Sayfamıza ait tasarım ve kodlar:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        1. Yazılı :
        <input type="text" id="txtNot1"><br><br>
        2. Yazılı : 
        <input type="text" id="txtNot2"><br><br>
        <input type="button" id="btn1" value="Hesapla"> 
        <div id="ort"></div>
        <div id="sonuc"></div>
        
        
        <script>
            $(document).ready(function(){

                $("#btn1").on("click",function(){
                    var y1=Number($("#txtNot1").val());
                    var y2=Number($("#txtNot2").val());
                    var ortalama=(y1+y2)/2;
                    $("#ort").html("Ortalamanız : "+ortalama);
                    if(ortalama>=50)
                        {
                            $("#sonuc").html("GEÇTİNİZ");
                            $("#sonuc").css({"color":"green"});
                        }
                    else
                        {
                            $("#sonuc").html("KALDINIZ");
                            $("#sonuc").css({"color":"red"});
                        }
                });  
            });
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

1. Yazılı :

2. Yazılı :

$(document).ready(function(){

$("#btn1").on("click",function(){

var y1=Number($("#txtNot1").val());

var y2=Number($("#txtNot2").val());

var ortalama=(y1+y2)/2;

$("#ort").html("Ortalamanız : "+ortalama);

if(ortalama>=50)

{

$("#sonuc").html("GEÇTİNİZ");

$("#sonuc").css({"color":"green"});

}

else

{

$("#sonuc").html("KALDINIZ");

$("#sonuc").css({"color":"red"});

}

});

</script>

</body>

</html>

Ekran çıktısı:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X