Το onclick είναι το Γεγονός κατά το οποίο ο χρήστης πατάει με το κουμπί του ποντικιού του επάνω σε ένα στοιχείο της σελίδας (πεδία κειμένου, λίστες, εικόνες, συνδέσμους, παραγράφους κτλ.)
Παράδειγμα 1
Παρακάτω έχουμε δύο πεδία κειμένου μέσα σε μια Φόρμα τα οποία περιέχουν το Γεγονός onclick. Αν πατήσετε με το κουμπί του ποντικιού σας επάνω σε οποιοδήποτε από τα δύο αυτά πεδία, τότε θα εμφανιστεί ένα κουτί με το μήνυμα: 'Μόλις εκτελέστηκε ένα Γεγονός onclick'.
Δείτε τον κώδικα:
Δείτε τον κώδικα:
Το γεγονός onclick σε πεδία κειμένου
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onclick ")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onclick="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onclick="disp_alert()">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert()
{
alert("Μόλις εκτελέστηκε ένα Γεγονός onclick ")
}
//-->
</script>
<body>
<form>
Όνομα:<input name="pedio1" type="text" size="10" onclick="disp_alert()">
Επώνυμο: <input name="pedio2" type="text" size="10" onclick="disp_alert()">
</form>
</body>
</html>
Παράδειγμα 2
Αν πατήσετε επάνω στο πεδίο Username θα εμφανιστεί ένα κουτί με το μήνυμα: 'ΠΡΟΣΟΧΗ: Το Username που θα πληκτρολογήσετε πρέπει να έχει λιγότερους από 15 χαρακτήρες.',
ενώ αν πατήσετε επάνω στο πεδίο password θα εμφανιστεί ένα κουτί με το μήνυμα: 'ΠΡΟΣΟΧΗ: Το Password που θα πληκτρολογήσετε πρέπει να έχει το λιγότερο 10 χαρακτήρες μεταξύ των οποίων και 2 σύμβολα.'
Δείτε τον κώδικα:
ενώ αν πατήσετε επάνω στο πεδίο password θα εμφανιστεί ένα κουτί με το μήνυμα: 'ΠΡΟΣΟΧΗ: Το Password που θα πληκτρολογήσετε πρέπει να έχει το λιγότερο 10 χαρακτήρες μεταξύ των οποίων και 2 σύμβολα.'
Δείτε τον κώδικα:
Το γεγονός onclick σε πεδία κειμένου
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_forUsername()
{
alert("ΠΡΟΣΟΧΗ: Το Username που θα πληκτρολογήσετε πρέπει να έχει λιγότερους από 15 χαρακτήρες.")
}
function disp_alert_forPassword()
{
alert("ΠΡΟΣΟΧΗ: Το Password που θα πληκτρολογήσετε πρέπει να έχει το λιγότερο 10 χαρακτήρες μεταξύ των οποίων και 2 σύμβολα.")
}
//-->
</script>
<body>
<form>
Username: <input type="text" name="username" size="15" onclick="disp_alert_forUsername()">
Password: <input type="text" name="password" size="15" onclick="disp_alert_forPassword()">
</form>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_forUsername()
{
alert("ΠΡΟΣΟΧΗ: Το Username που θα πληκτρολογήσετε πρέπει να έχει λιγότερους από 15 χαρακτήρες.")
}
function disp_alert_forPassword()
{
alert("ΠΡΟΣΟΧΗ: Το Password που θα πληκτρολογήσετε πρέπει να έχει το λιγότερο 10 χαρακτήρες μεταξύ των οποίων και 2 σύμβολα.")
}
//-->
</script>
<body>
<form>
Username: <input type="text" name="username" size="15" onclick="disp_alert_forUsername()">
Password: <input type="text" name="password" size="15" onclick="disp_alert_forPassword()">
</form>
</body>
</html>
Παράδειγμα 3
Το onclick λειτουργεί και σε εικόνες. Πατήστε επάνω στην εικόνα και θα εμφανιστεί ένα μήνυμα.
Δείτε τον κώδικα:
Δείτε τον κώδικα:
Το γεγονός onclick σε εικόνα
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_forImage()
{
alert("Μόλις πατήσατε επάνω στην εικόνα..")
}
//-->
</script>
<body>
<img xsrc="images/logo.gif" width="250" height="90" onclick="disp_alert_forImage()">
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_forImage()
{
alert("Μόλις πατήσατε επάνω στην εικόνα..")
}
//-->
</script>
<body>
<img xsrc="images/logo.gif" width="250" height="90" onclick="disp_alert_forImage()">
</body>
</html>
Παράδειγμα 4
Το onclick λειτουργεί επίσης και σε παραγράφους, δηλαδή σε κείμενα ορισμένα από τις ετικέτες <p> και </p>, όπου αν πατήσετε με το ποντίκι σας οπουδήποτε μέσα στην παράγραφο θα ενεργοποιηθεί μια λειτουργία Javascript.
Δείτε τον κώδικα:
Το γεγονός onclick σε παράγραφο
<html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_paragraph()
{
alert("Μόλις πατήσατε επάνω στην παράγραφο.")
}
//-->
</script>
<body>
<p onClick="disp_alert_paragraph()">Το onclick λειτουργεί επίσης και σε παραγράφους, δηλαδή σε κείμενα ορισμένα από τις ετικέτες <p> και </p>. Αυτή η παράγραφο που διαβάζετε περιέχει το Γεγονός onclick, πράγμα που σημαίνει ότι αν πατήσετε με το ποντίκι σας οπουδήποτε μέσα στην παράγραφο θα ενεργοποιηθεί μια λειτουργία Javascript που στην προκειμένη περίπτωση είναι η εμφάνιση ενός μηνύματος.</p>
</body>
</html>
<head>
<title>WLearn.gr</title>
<script type="text/javascript">
<!--
function disp_alert_paragraph()
{
alert("Μόλις πατήσατε επάνω στην παράγραφο.")
}
//-->
</script>
<body>
<p onClick="disp_alert_paragraph()">Το onclick λειτουργεί επίσης και σε παραγράφους, δηλαδή σε κείμενα ορισμένα από τις ετικέτες <p> και </p>. Αυτή η παράγραφο που διαβάζετε περιέχει το Γεγονός onclick, πράγμα που σημαίνει ότι αν πατήσετε με το ποντίκι σας οπουδήποτε μέσα στην παράγραφο θα ενεργοποιηθεί μια λειτουργία Javascript που στην προκειμένη περίπτωση είναι η εμφάνιση ενός μηνύματος.</p>
</body>
</html>
