JavaScript onClick olayı, bir çok sayfa elementinde, elemente fare ile tıklandığı zaman gerçekleşir.
Bu örnek, JavaScript onClick olay tutucuyu kullanarak Button kontrollerine tıklandığı zaman İstiklal Marşı'mızın gösterilmesini/gizlenmesi göstermektedir.
<html>
<head>
<title>JavaScript onClick Olay tutucu örneği</title>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
#discerceve { width: 400px; border: solid 4px #59f; padding: 5px; }
#iccerceve { width: 378px; border: solid 1px #59f; padding: 10px; font-weight: bold; color: #606060; }
</style>
<script type="text/javascript">
var IstiklalMarsi = "<center><h3>İSTİKLAL MARŞI</h3></center>"+
"Korkma, sönmez bu şafaklarda yüzen al sancak <br />"+
"Sönmeden yurdumun üstünde tüten en son ocak. <br />"+
"O benim milletimin yıldızıdır parlayacak! <br />"+
"O benimdir, o benim milletimindir ancak! <br /><br />"+
"Çatma, kurban olayım, çehreni ey nazlı hilal! <br />"+
"Kahraman ırkıma bir gül... ne bu şiddet, bu celâl? <br />"+
"Sana olmaz dökülen kanlarımız sonra helal. <br />"+
"Hakkıdır, Hakk'a tapan milletimin istiklal. <br /><br />"+
"<div style=\"text-align:right;\">Mehmet Akif ERSOY</div><br/>";
function IstiklalMarsiGoster() {
document.getElementById('iccerceve').innerHTML = IstiklalMarsi;
}
function IstiklalMarsiGizle() {
document.getElementById('iccerceve').innerHTML = '';
}
</script>
</head>
<body>
<input type="button" value="İstiklal Marşı'nı Göster" onClick="IstiklalMarsiGoster()" />
<input type="button" value="Gizle" onClick="IstiklalMarsiGizle()" />
<br/><br/>
<div id="discerceve">
<div id="iccerceve"> </div>
</div>
</body>
</html>