Alguns en diuen màgia: la capacitat de fer aparèixer objectes de sobte del no-res. Podeu crear aquest tipus de màgia al vostre lloc web amb algunes línies de JavaScript. Els quadres de text, per exemple, són bons elements HTML per utilitzar quan s’aprèn a fer aparèixer objectes de forma dinàmica. En lloc d’incorporar-los al vostre codi quan dissenyeu la vostra pàgina web, afegiu quadres de text segons sigui necessari i impressioneu els visitants del lloc alhora.
Creació de quadres de text
Abans de materialitzar un quadre de text, heu d’entendre què és un quadre de text. HTML el coneix com una etiqueta d'entrada, tal com es mostra a l'exemple següent:
Aquesta etiqueta d’entrada crea un quadre de text que té dos atributs importants; identificador i tipus. L'atribut type, el valor del qual és "text", indica als navegadors que creïn un quadre de text en lloc d'un altre tipus de control, com ara un botó. L'atribut id, que és opcional, pot ser útil si heu de manipular el quadre de text més endavant. L'opció de valor, que també és opcional, conté el valor que voleu veure al quadre de text quan s'obre la pàgina web.
Quadres de text dinàmics
L’HTML no importa quan definiu els atributs d’un element sempre que els doneu valors en algun lloc. Això vol dir que teniu la possibilitat de crear dinàmicament un element de quadre de text i establir-ne els atributs en qualsevol moment. La funció document.createElement ho fa possible tal com es mostra a continuació:
var box = document.createElement ("entrada");
Això és tot el que es necessita per crear un element d'entrada HTML i assignar-lo a una variable anomenada "quadre". L'objecte de la caixa no es converteix en un quadre de text fins que no doneu a l'atribut type un valor de "text", tal com es mostra en aquest exemple:
box.type = "text";
Integració de pàgines web
Aquest codi següent afegeix el quadre de text al document HTML mitjançant la útil funció appendChild:
document.body.appendChild (quadre);
Si voleu afegir el quadre de text després d'un control específic, utilitzeu la declaració següent:
document.getElementById ("some_Element_ID"). appendChild (quadre);
Substituïu "some_Element_ID" pel nom de l'element després del qual voleu afegir el quadre de text. Per exemple, si aquest element fos un botó l'identificador del qual era "botó1", la instrucció appendChild apareixeria de la següent manera:
document.getElementById ("button1"). appendChild (quadre);
Atributs opcionals
El vostre nou quadre de text funcionarà perfectament amb aquest codi. Simplement creeu una funció JavaScript que contingui la declaració i truqueu-la sempre que necessiteu un quadre de text. Tanmateix, també podeu definir el valor i els atributs d'identificació del quadre de text de la següent manera:
caixa.valor = caixaValor; box.id = boxID;
Passeu els valors de boxValue i boxID a la funció i aplica aquests atributs al quadre de text. Si assigneu un valor d'identificador, el podreu utilitzar més tard per actualitzar les propietats del quadre de text, tal com es mostra a l'exemple següent:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "vermell";
La primera sentència obté una referència al quadre de text i la darrera sentència canvia el color de fons del quadre de text a vermell.
