JavaScript .oninput Olay Örneği – Ahmet Cansever
Cuma , 22 Eylül 2017
Anasayfa » Javascript » JavaScript .oninput Olay Örneği

JavaScript .oninput Olay Örneği

 

Bu örneğimizde “.oninput” olayını kullanarak basit bir hesaplama örneği yapacağız.

“.oninput” nesneye değer girildiğinde veya nesnenin içerisindeki değer değiştirildiğinde butona gerek duymaksızın, belirlenen yere sonucu yazdırır.

 

 

Html: Sayıları kullanıcıdan almak için text nesnesi oluşturuyoruz. Hangi işlemin yapılacağını ayrı bir text oluşturduk ve sonucu ekrana yazdırmak için bir div oluşturduk. İşlem ilk başta varsayılan olarak toplama işlemini yapacaktır.

 

 

JavaScript: Nesneleri değişken içeresinde atayarak tanımlıyoruz.

 

“.oninput” input etiketinin içerisine değer girildiğinde/değiştirildiğinde bir butona basmaya gerek duymaksızın ekrana yazdırır.

“.oninput” olayını nesnelere atıyoruz. Böylece ilk sayı girildiğinde ekrana yazdıracak, ikinci sayı girildiğinde varsayılanı toplama ayarladığımız için iki sayıyı toplayıp ekrana yazdıracaktır.

 

 

Nesneleri sayıya çevirdikten sonra operatörler için uygulanacak kodları yazıyoruz ve tanımladığımız div nesnesinin içerisinde gösterilmesini sağlıyoruz. Belirlenen operatörler dışında bir operatör kullanıldığı takdirde ise “Tanımlanmayan Operatör” yazısı ekranda yazacaktır.

Etiketlerin içerlerindeki değerlerini değiştirmek için JavaScriptten çekerken; kapanışı olan etiketler için (div etiketi gibi ) “.innerHTML” kullanılırken kendi içerisinde kapanan etiketler için (input etiketleri gibi) “.value” kullanılır. Böylece değişiklik yaparken içlerindeki değerler de değişir. “goster” divinin içerisine sonucu yazdırırken de “.innerHTML” kullanıyoruz.

 

Css: Son olarak stil kodlarını ekleyerek nesneleri alt alta alıyorum ve dive kenarlık ekleyerek yerini belirliyorum.

 

Hakkında Sinem Çimen

İlginizi Çekebilir

JQuery Vize Final Notu Ortalaması Hesaplama

Bu örneğimizde JQuery ile Vize ve Final Notu Girilen bir öğrenciye ait Ortalama hesaplayarak ve …

Yorum Yap

Wordpress Tema indir