Gli sviluppatori per lo più vogliono che le loro pagine web siano attraenti e le rendano interattive. A tale scopo, i pulsanti vengono aggiunti alla pagina web. Ad esempio, quando è necessario inviare o ricevere dati, inclusi eventi di clic per funzionalità aggiuntive per l'utente durante la registrazione o l'accesso a un account. In questi casi, i pulsanti consentono all'utente finale di eseguire varie funzionalità in modo intelligente.
Questo blog spiegherà i metodi per creare pulsanti in JavaScript.
Come creare un pulsante in JavaScript?
Per creare un pulsante in JavaScript, è possibile utilizzare i seguenti metodi:
I seguenti approcci dimostreranno il concetto uno per uno!
Metodo 1: Crea pulsante in JavaScript utilizzando i metodi 'createElement()' e 'appendChild()'.
Il ' creaElemento() ' il metodo crea un elemento e il ' appendChild() ” aggiunge un elemento all'ultimo figlio di un elemento. Questi metodi verranno applicati per creare un pulsante e aggiungerlo al Document Object Model (DOM) che deve essere utilizzato, rispettivamente.
Sintassi
documento. createElement ( genere )elemento. appendChild ( nodo )
Nella sintassi sopra, ' genere ” si riferisce al tipo di elemento che verrà creato utilizzando il metodo createElement() e “ nodo ” è il nodo che verrà aggiunto con l'aiuto del metodo appendChild().
L'esempio seguente spiegherà il concetto affermato.
Esempio
In primo luogo, un ' pulsante ” verrà creato utilizzando il metodo document.createElement() e memorizzato in una variabile denominata “ creaButton ”:
cost creaButton = documento. createElement ( 'pulsante' )Successivamente, il ' testo interno ” si riferirà al pulsante creato e imposterà il valore del testo del pulsante specificato come segue:
creaButton. testo interno = 'Cliccami'Infine, il “ appendChild() ” aggiungerà il pulsante creato al DOM facendo riferimento alla variabile in cui è memorizzato come argomento:
documento. corpo . appendChild ( creaButton ) ;L'output della suddetta implementazione risulterà come segue:
Metodo 2: Crea pulsante in JavaScript utilizzando l'attributo 'Tipo' del tag 'input'.
Il ' genere L'attributo ” rappresenta il tipo di elemento di input da visualizzare. Può essere utilizzato per creare un pulsante specificando “ pulsante ” come valore dell'attributo type della variabile di ingresso.
Sintassi
< tipo di ingresso = 'pulsante' >Qui, ' pulsante ” indica il tipo di campo di input.
Dai un'occhiata all'esempio riportato di seguito.
Esempio
In primo luogo, useremo un tag di input, ne specificheremo il tipo come ' pulsante ”, e valore come “ Cliccami ”. Di conseguenza, verrà creato un pulsante. Inoltre, attiverà il ' creaButton() ” funzione quando si fa clic:
< tipo di ingresso = valore del pulsante = Click_Me onclick = 'creareButton()' >Nel file JavaScript, definiremo il ' creaButton() ” funzione che genererà una finestra di avviso quando verrà cliccato il pulsante aggiunto:
funzione creaButton ( ) {mettere in guardia ( 'Questo è un pulsante' )
}
Produzione
Le tecniche discusse per creare un pulsante in JavaScript possono essere utilizzate opportunamente in base ai requisiti.
Conclusione
Per creare un pulsante in JavaScript, ' creaElemento() ' e ' appendChild() ” possono essere applicati per creare un pulsante e aggiungerlo da utilizzare nel DOM. Un'altra tecnica che può essere utilizzata per creare un pulsante è definire un tipo di input e aggiungere la funzionalità associata. Questo articolo ha illustrato i metodi per creare un pulsante in JavaScript.