Οι προγραμματιστές θέλουν κυρίως οι ιστοσελίδες τους να είναι ελκυστικές και να τις κάνουν διαδραστικές. Για το σκοπό αυτό, προστίθενται κουμπιά στην ιστοσελίδα. Για παράδειγμα, όταν υπάρχει ανάγκη αποστολής ή λήψης δεδομένων, συμπεριλαμβανομένων συμβάντων κλικ για πρόσθετες λειτουργίες για τον χρήστη κατά την εγγραφή ή τη σύνδεση σε έναν λογαριασμό. Σε τέτοιες περιπτώσεις, τα κουμπιά επιτρέπουν στον τελικό χρήστη να εκτελεί διάφορες λειτουργίες έξυπνα.
Αυτό το ιστολόγιο θα εξηγήσει τις μεθόδους δημιουργίας κουμπιών σε JavaScript.
Πώς να δημιουργήσετε κουμπί σε JavaScript;
Για τη δημιουργία κουμπιού σε JavaScript, μπορούν να χρησιμοποιηθούν οι ακόλουθες μέθοδοι:
Οι παρακάτω προσεγγίσεις θα δείξουν την ιδέα μία προς μία!
Μέθοδος 1: Κουμπί Δημιουργία σε JavaScript χρησιμοποιώντας μεθόδους 'createElement()' και 'appendChild()'
Ο ' createElement() Η μέθοδος ' δημιουργεί ένα στοιχείο και το ' appendChild() Η μέθοδος προσαρτά ένα στοιχείο στο τελευταίο θυγατρικό ενός στοιχείου. Αυτές οι μέθοδοι θα εφαρμοστούν για τη δημιουργία ενός κουμπιού και την προσάρτησή του στο μοντέλο αντικειμένου εγγράφου (DOM) που πρέπει να χρησιμοποιηθεί, αντίστοιχα.
Σύνταξη
έγγραφο. ΔημιουργίαΣτοιχείου ( τύπος )στοιχείο. appendChild ( κόμβος )
Στην παραπάνω σύνταξη, ' τύπος ' αναφέρεται στον τύπο του στοιχείου που θα δημιουργηθεί χρησιμοποιώντας τη μέθοδο createElement() και ' κόμβος ” είναι ο κόμβος που θα προσαρτηθεί με τη βοήθεια της μεθόδου appendChild().
Το ακόλουθο παράδειγμα θα εξηγήσει την αναφερόμενη έννοια.
Παράδειγμα
Πρώτον, ένα « κουμπί ' θα δημιουργηθεί χρησιμοποιώντας τη μέθοδο document.createElement() και θα αποθηκευτεί σε μια μεταβλητή με το όνομα ' κουμπί δημιουργίας ”:
συνθ κουμπί δημιουργίας = έγγραφο. ΔημιουργίαΣτοιχείου ( 'κουμπί' )Στη συνέχεια, το « innerText Η ιδιότητα ” θα αναφέρεται στο κουμπί που δημιουργήθηκε και θα ορίσει την τιμή κειμένου του καθορισμένου κουμπιού ως εξής:
κουμπί δημιουργίας. innerText = 'Click_Me'Τέλος, το « appendChild() Η μέθοδος ” θα προσαρτήσει το κουμπί που δημιουργήθηκε στο DOM αναφερόμενος στη μεταβλητή στην οποία είναι αποθηκευμένο ως όρισμα:
έγγραφο. σώμα . appendChild ( κουμπί δημιουργίας ) ;Το αποτέλεσμα της παραπάνω υλοποίησης θα έχει ως εξής:
Μέθοδος 2: Κουμπί Δημιουργία σε JavaScript χρησιμοποιώντας το χαρακτηριστικό 'Type' της ετικέτας 'input'
Ο ' τύπος Το χαρακτηριστικό ” αντιπροσωπεύει τον τύπο του στοιχείου εισόδου που θα εμφανιστεί. Μπορεί να χρησιμοποιηθεί για τη δημιουργία ενός κουμπιού καθορίζοντας ' κουμπί ” ως τιμή του χαρακτηριστικού τύπου της ετικέτας εισόδου.
Σύνταξη
< τύπος εισόδου = 'κουμπί' >Εδώ, ' κουμπί ' υποδεικνύει τον τύπο του πεδίου εισαγωγής.
Δείτε το παρακάτω παράδειγμα.
Παράδειγμα
Αρχικά, θα χρησιμοποιήσουμε μια ετικέτα εισόδου, θα καθορίσουμε τον τύπο της ως ' κουμπί ' και τιμή ως ' Click_Me '. Ως αποτέλεσμα, θα δημιουργηθεί ένα κουμπί. Επιπλέον, θα ενεργοποιήσει το « createButton() Λειτουργεί όταν κάνετε κλικ:
< τύπος εισόδου = τιμή του κουμπιού = Click_Me onclick = 'createButton()' >Στο αρχείο JavaScript, θα ορίσουμε το ' createButton() λειτουργία που θα δημιουργήσει ένα πλαίσιο ειδοποίησης όταν κάνετε κλικ στο κουμπί που προστέθηκε:
λειτουργία κουμπί δημιουργίας ( ) {συναγερμός ( 'Αυτό είναι ένα κουμπί' )
}
Παραγωγή
Οι τεχνικές που συζητήθηκαν για τη δημιουργία ενός κουμπιού σε JavaScript μπορούν να χρησιμοποιηθούν κατάλληλα σύμφωνα με τις απαιτήσεις.
συμπέρασμα
Για να δημιουργήσετε ένα κουμπί σε JavaScript, ' createElement() ' και ' appendChild() ” μπορούν να εφαρμοστούν μέθοδοι για τη δημιουργία ενός κουμπιού και την προσάρτησή του για χρήση στο DOM. Μια άλλη τεχνική που μπορεί να χρησιμοποιηθεί για τη δημιουργία ενός κουμπιού είναι ο καθορισμός ενός τύπου εισόδου και η προσθήκη της σχετικής λειτουργικότητας. Αυτό το άρθρο παρουσίασε τις μεθόδους δημιουργίας κουμπιού σε JavaScript.