JavaScript .oninput Olay Örneği – Ahmet Cansever
Javascript

JavaScript .oninput Olay Örneği

Tarafından yazılmıştır Sinem Çimen

 

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.

 

Yorum Yap