JavaScript ile inputlardan gelen value değerlerini kontrol etme.


JavaScript oldukça  gelişmiş bir programlama  dilidir. Php ile  benzerlikleri oldukça fazldır. Bu dersimizde  inputlardan  gelen verileri bir değişkene  alarak if sorgusu ile  kontrol edeceğiz. Yapacağımız örnek bir nevi captcha benzeri olacak.

 

İlk olarak  html kodlarımızı yazıyoruz;

JavaScript ile inputların value değerlerini almak

 

Lütfen 1 ile 10 arasında bir rakam giriniz:

 

 

Daha sonra, numb  id’sini  tanımladığımız inputtan gelen verileri, “demo” id’si tanımlamış paragraf etiketi içerisine yazdıracağız.

 

Bunun için hemen  javaScript’te bir fonksiyon yazıyoruz.

 

 

Üstteki kodların  kısaca  açıklamalarına  değinmek gerekirse;

var x, text; // x ve text verilerini  değişken olarak  kullanacağımızı belirttik .

x = document.getElementById(“numb”).value;   // numb id’si tanımlanmış inputtan gelen value verilerini, x  adlı değişkene  aldık.

if sorgusu içerisinde,

isNaN(x) – değer boşsa,

x < 1   – değer  1’den küçükse ,

x > 10 – değer 10’dan büyükse, ekrana  yanlış girdiniz yazısını yazdırdık.

Tam tersi ise, zaten istediğimiz buydu, text değişkenine   doğru girildiği sonucucu yazdırdık.

 

Son olarak  text değişkeninin  aldığı değeri “demo” isimli paragraf  etiketine  javaScript ile  yazdırdık.

 

Son hali Aşağıdadır.

See the Pen javascript dersleri örnek 5 by Bulut (@bulutaylak) on CodePen.

web bulutu

Bir önceki yazımız olan Scroll aşağıya indikçe efektli açılan divler / Resimler. başlıklı makalemizde animate css, div efekt ve scroll efekt hakkında bilgiler verilmektedir.


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir