Els desenvolupadors volen que les seves pàgines web siguin atractives i les facin interactives. Amb aquesta finalitat, s'afegeixen botons a la pàgina web. Per exemple, quan cal enviar o rebre dades, inclosos els esdeveniments de clic per a funcionalitats afegides per a l'usuari mentre es registra o inicia sessió en un compte. En aquests casos, els botons permeten a l'usuari final realitzar diverses funcionalitats de manera intel·ligent.
Aquest bloc explicarà els mètodes per crear botons en JavaScript.
Com crear un botó en JavaScript?
Per crear un botó en JavaScript, es poden utilitzar els mètodes següents:
Els enfocaments següents demostraran el concepte un per un!
Mètode 1: Crea un botó a JavaScript utilitzant els mètodes 'createElement()' i 'appendChild()'
El ' createElement() El mètode ' crea un element i el ' appendChild() ” El mètode afegeix un element a l'últim fill d'un element. Aquests mètodes s'aplicaran per crear un botó i afegir-lo al Document Object Model (DOM) que cal utilitzar, respectivament.
Sintaxi
document. createElement ( tipus )element. appendChild ( node )
En la sintaxi anterior, ' tipus ' es refereix al tipus d'element que es crearà mitjançant el mètode createElement() i ' node ” és el node que s'adjuntarà amb l'ajuda del mètode appendChild().
L'exemple següent explicarà el concepte indicat.
Exemple
En primer lloc, un ' botó ' es crearà mitjançant el mètode document.createElement() i s'emmagatzemarà en una variable anomenada ' createButton ”:
const createButton = document. createElement ( 'botó' )A continuació, el ' text interior ” La propietat farà referència al botó creat i establirà el valor de text del botó especificat de la següent manera:
createButton. text interior = 'Click_Me'Finalment, el ' appendChild() ” El mètode afegirà el botó creat al DOM fent referència a la variable en què s'emmagatzema com a argument:
document. cos . appendChild ( createButton ) ;El resultat de la implementació anterior serà el següent:
Mètode 2: crear un botó a JavaScript utilitzant l'atribut 'Tipus' de l'etiqueta 'entrada'
El ' tipus ”l'atribut representa el tipus d'element d'entrada a mostrar. Es pot utilitzar per crear un botó especificant “ botó ” com el valor de l'atribut type de l'etiqueta d'entrada.
Sintaxi
< tipus d'entrada = 'botó' >Aquí, ' botó ” indica el tipus de camp d'entrada.
Consulteu l'exemple que es mostra a continuació.
Exemple
En primer lloc, utilitzarem una etiqueta d'entrada, especificarem el seu tipus com a ' botó ”, i el valor com a “ Fes clic a mi ”. Com a resultat, es crearà un botó. A més, activarà el ' createButton() ” funció quan es fa clic:
< tipus d'entrada = valor del botó = Feu clic a mi on feu clic = 'crearBotó()' >Al fitxer JavaScript, definirem el ' createButton() ” funció que generarà un quadre d'alerta quan es faci clic al botó afegit:
funció createButton ( ) {alerta ( 'Això és un botó' )
}
Sortida
Les tècniques discutides per crear un botó en JavaScript es poden utilitzar adequadament segons els requisits.
Conclusió
Per crear un botó en JavaScript, ' createElement() ' i ' appendChild() Es poden aplicar mètodes per crear un botó i afegir-lo per utilitzar-lo al DOM. Una altra tècnica que es pot utilitzar per crear un botó és definir un tipus d'entrada i afegir la funcionalitat associada. Aquest article mostra els mètodes per crear un botó a JavaScript.