Slik får du tilgang til HTML-formelementer i JavaScript - dummies

Som med andre HTML-elementer, kan du samhandle direkte med HTML5-elementer i JavaScript. Trikset er å sikre at elementene du velger, vil fungere med nettleserne og plattformene du trenger å støtte.

I dette eksemplet ser du hvordan du bruker og tagger som en del av en løsning som laster et bilde fra disken og lagrer det i en

tag. Følgende kode viser HTML-koden du bruker til å utføre oppgaven.

Koden fungerer som en beholder som holder

og merkene. Bruken av en container som dette betyr at du kan utføre oppgaver som for eksempel formatering av både bilde og bildetekst samtidig.

Hendelser håndteres også i fellesskap. I dette tilfellet spiller det ingen rolle om brukeren klikker bildet eller bildeteksten, applikasjonen kalles Clicked (). I dette tilfellet viser alt som Clicked () gjør, en melding til brukeren som vist her:

funksjon Clicked () {// Vis en melding. varsling ("Du klikket på bildet.");}

JavaScript er fullt i stand til å få tilgang til disse elementene. I dette tilfellet er

-taggen tom når skjemaet laster. Ved å klikke på en knapp vises bildet på skjermen ved å endre innholdet på

-taggen. Her er koden som trengs for å laste bildet:

funksjon LoadImage () {// Angi bildet. var Image = dokument. getElementById ("Image"); Bilde. alt = "Dette er et testbilde."; Bilde. src = "TestImage. png"; // Sett bildeteksten. var Caption = dokument. getElementById ("linjen"); Bildetekst. innerHTML = "Et testbilde";}

Når du arbeider med

-taggen, får du tilgang til egenskapene src (bildekilde) og alt (bildealternativ tekstbeskrivelse) direkte. Angi innholdet ved hjelp av egenskapen innerHTML.