- Πώς να αλλάξετε ένα κουμπί σε JavaScript;
- Παράδειγμα 1: Τροποποίηση μηνυμάτων κειμένου με εναλλαγή ενός κουμπιού
- Παράδειγμα 2: Εναλλαγή κουμπιού ON/OFF σε JavaScript
Πώς να αλλάξετε ένα κουμπί σε JavaScript;
Μια δήλωση υπό όρους είναι μια βασική απαίτηση για την εναλλαγή ενός κουμπιού στο JavaScript. Για να το πετύχετε αυτό, πρέπει να λάβετε το στοιχείο και στη συνέχεια να εφαρμοστεί κάποια προσαρμοσμένη συνάρτηση για να εφαρμόσετε κάποια συγκεκριμένη λειτουργία σε αυτό το στοιχείο. Η λειτουργία σχετίζεται με το συμβάν onclick του κουμπιού. Έτσι, όποτε γίνεται κλικ στο κουμπί, αυτή η λειτουργία θα εκτελείται. Ας εξασκηθούμε σε μερικά παραδείγματα για την εναλλαγή ενός κουμπιού στο JavaScript.
Παράδειγμα 1: Τροποποίηση μηνυμάτων κειμένου με εναλλαγή ενός κουμπιού
Ένα παράδειγμα θεωρείται ότι τροποποιεί ένα μήνυμα κάνοντας εναλλαγή ενός κουμπιού στο JavaScript. Το παράδειγμα περιλαμβάνει κώδικα HTML και JavaScript, οι οποίοι εξηγούνται παρακάτω:
Κώδικας HTML
< html >
< h2 > Παράδειγμα για εναλλαγή ενός κουμπιού < / h2 >
< div ταυτότητα = 'js' > Πατήστε το κουμπί για να δείτε τη μαγεία < / div >
< κουμπί στο κλικ = 'btntog()' > Κουμπί < / κουμπί >
< / html >
< γραφή src = 'test.js' >< / γραφή >
Στον κώδικα HTML, η περιγραφή είναι η εξής:
- ΕΝΑ η ετικέτα δημιουργείται με ένα ' id=js '.
- Μετά από αυτό, δημιουργείται ένα κουμπί που σχετίζεται με το a “btntog()” μέθοδος. Πατώντας 'Κουμπί' , η μέθοδος ' btntog() ” ενεργοποιείται.
- Στο τέλος, το αρχείο JavaScript 'test.js' περνιέται ως src στα πλαίσια <σενάριο> ετικέτες.
Ο κώδικας για το αρχείο JavaScript ' test.js ” παρέχεται εδώ:
Κώδικας JavaScript
functionbtntog ( )
{
όπου = έγγραφο. getElementById ( 'js' ) ;
αν ( t. innerHTML == 'Καλώς ήρθατε στο Linuxhint' ) {
t. innerHTML = 'Κόσμος JavaScript' ; }
αλλού {
t. innerHTML = 'Καλώς ήρθατε στο Linuxhint' ; }
}Σε αυτόν τον κώδικα:
- getElementById χρησιμοποιείται για την εξαγωγή του στοιχείου HTML ' js ' και η τιμή αποθηκεύεται σε μια μεταβλητή ' t '.
- Μετά από αυτό, το innerHTML Η ιδιότητα χρησιμοποιείται στην συνθήκη if για έλεγχο του κειμένου ' Καλώς ήρθατε στο Linuxhint '.
- Εάν η συνθήκη είναι αληθής, το περιεχόμενο ' Καλώς ήρθατε στο Linuxhint ” αντικαθίσταται με «Κόσμος JavaScript '.
- Εάν η συνθήκη είναι ψευδής, το κείμενο “Καλώς ήρθατε στο Linuxhint” εκχωρείται ως περιεχόμενο HTML στην ετικέτα div.
Παραγωγή
Η έξοδος δείχνει ότι η εναλλαγή ενός κουμπιού επιστρέφει δύο μηνύματα ως “Καλώς ήρθατε στο Linuxhint” και 'Κόσμος JavaScript' εναλλακτικά.
Παράδειγμα 2: Εναλλαγή κουμπιού ON/OFF σε JavaScript
Ακολουθείται ένα παράδειγμα για την αλλαγή του ενσωματωμένου κειμένου του κουμπιού. Σε αυτό το παράδειγμα, το « ON/OFF Το κείμενο θα αλλάξει εναλλακτικά την τιμή πατώντας το κουμπί. Οι κωδικοί HTML και JavaScript παρέχονται εδώ:
Κώδικας HTML
< html >
< h2 > Παράδειγμα για εναλλαγή ενός κουμπιού h2 >
< τύπος εισόδου = 'κουμπί' ταυτότητα = 'myBtn' αξία = 'ΜΑΚΡΙΑ ΑΠΟ'
στο κλικ = 'ημερομηνία();' >
< script src = 'test.js' γραφή >
html >Ο παραπάνω κώδικας περιγράφεται ως εξής:
- Ένα κουμπί με δυνατότητα κλικ με αναγνωριστικό “myBtn” δημιουργείται και η τιμή του ορίζεται σε 'ΜΑΚΡΙΑ ΑΠΟ' .
- Πατώντας το κουμπί, το ημερομηνία() θα ενεργοποιηθεί η μέθοδος.
- Στο τέλος, 'test.js' είναι προσαρτημένο στη διαδρομή πηγής εντός <σενάριο> ετικέτα.
Κώδικας JavaScript
functiontgl ( )
{
όπου = έγγραφο. getElementById ( 'myBtn' ) ;
αν ( t. αξία == 'ΕΠΙ' ) {
t. αξία = 'ΜΑΚΡΙΑ ΑΠΟ' ; }
otherif ( t. αξία == 'ΜΑΚΡΙΑ ΑΠΟ' ) {
t. αξία = 'ΕΠΙ' ; }
}Σε αυτόν τον κώδικα:
- ΕΝΑ ημερομηνία() Η μέθοδος χρησιμοποιείται για την εναλλαγή ενός κουμπιού στο JavaScript.
- Σε αυτήν τη μέθοδο, εξάγετε το στοιχείο HTML χρησιμοποιώντας το getElementById ιδιοκτησία και, στη συνέχεια, προστίθεται σε αυτήν η δήλωση if else-if.
- Αν το 'value==ON' , αλλάξτε την τιμή σε 'ΜΑΚΡΙΑ ΑΠΟ'. Αν η τιμή είναι ΜΑΚΡΙΑ ΑΠΟ, τότε η τιμή θα αλλάξει σε ' ΕΠΙ' .
Παραγωγή
Η έξοδος δείχνει ότι έχει γίνει εναλλαγή από το κουμπί ΜΑΚΡΙΑ ΑΠΟ προς την ΕΠΙ .
Αυτό είναι όλο! Έχετε μάθει να αλλάζετε ένα κουμπί στο JavaScript.
συμπέρασμα
Στο JavaScript, ένα κουμπί μπορεί να χρησιμοποιηθεί για εναλλαγή μεταξύ διαφόρων καταστάσεων των δικών του τιμών ή οποιαδήποτε συνάρτηση μπορεί να συσχετιστεί με τη λειτουργία εναλλαγής. ο στο κλικ() το συμβάν του κουμπιού σχετίζεται με τη λειτουργία. Αυτό το άρθρο εξηγεί μια επισκόπηση της εναλλαγής ενός κουμπιού μαζί με δύο πρακτικά παραδείγματα. Το πρώτο παράδειγμα εξάγει το κείμενο από το innerHTML ιδιοκτησία και την τροποποιεί μέσω ενός κουμπιού εναλλαγής. Στο δεύτερο παράδειγμα, η τιμή του ίδιου του κουμπιού αλλάζει χρησιμοποιώντας μια προσαρμοσμένη συνάρτηση.