Javascript onclick kullanımı

Javascript

onclick

kullanımında bir html elemanı veya nesnesinde click olayını dinlemektedir. Html elemanına click olayı sağlandığında bir fonksiyon çağırabilir veya tek satırlık bir komut çalıştırabilmekteyiz.

Kullanıcı :

onclick=""

En basitinden bir

h1 

etiketine click olayını dinleyebiliriz.

<h1 onclick="alert('Bana Tıkladı')">Kod Hocası</h1>

Yukarıdaki örnekte

h1 

etiketimize tıklandığında kullanıcıya Bana Tıklandı diye uyarı verecektir. Bu işlemde javascript kodlarımı script etiketleri arasında yazmamız gerekmemektedir.

Eğer

onclick 

olayında bir fonskiyonu tetiklemek ister isek

onclick 

içerisinde fonksiyonu çağırmamız yeterlidir.

<button onclick="simpleFunc()">Kod Hocasi</button>

function simpleFunc(){
 console.log("Butona Tıklandı");
}

Yukarıdaki örnek üzerine butona

click 

işlemi uygulandığında

simpleFunc()

fonksiyonu devre girecek ve içerisinde komutlar çalışacaktır. Bunun soncunda console çıktımız aşağıdaki gibi olacaktır.

onclick 

işlemi ile bir fonksiyon çağırırken bu fonksiyona parametre gönderebilir ve en güzel olanı ise

this 

anahtar kelime ile tıklanan elemanın özelliğini fonksiyona gönderebilmekteyiz.

<p onclick="wScreen(this)">Paragraf İçeriği</p>

function wScreen(e){
 console.log(e.innerHTML);
}

Yukarıdaki örnekte görüldüğü gibi fonksiyonumuzu

onclick 

ile tetikletirken html elemanının özelliklerini

this 

ile fonksiyon içerisine gönderebilmekteyiz.

Yukarıdaki örneğin console çıktısı aşağıdaki gibidir.