Hvordan endre HTML Text Med Javascript Variabler

Hvordan endre HTML Text Med Javascript Variabler


Javascript er en klient-side skriptspråk som bruker variabler som oppfører seg på samme måte som variabler oppføre seg i andre programmeringsspråk. Javascript variabler trenger ikke å bli erklært før du bruker dem, heller ikke de trenger å ha en tildelt type eller allokert minne. Du kan bruke Javascript variabler å holde verdier for å oppdatere de fleste Web side objekter dynamisk, for eksempel tekst eller grafikk. I tillegg bruker Javascript for å oppdatere en HTML-element er "innerhtml" eiendom; Dette er en metode for dynamisk endring hele tekstfelt på fly.

Bruksanvisning

1 Åpne en teksteditor og opprette en ny fil med navnet "changeTextVars.html." Skriv seks HTML-koder i filen:

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

Lagre "changeTextVars.html."

2 Plasser en Javascript åpen skriptmerket - "<script>" - inne i HTML "<head>" tag. Sett "<script>" tag er "type" verdien til "text / javascript" og lukk "</ script>" tag:

<Html>

<Head>

<Script type = "text / javascript">

</ Script>

</ Head>

<Body> </ body>

</ Html>

3 Legg en Javascript-funksjon mellom "<script>" og "</ script>" tags heter "changeText ()." Den "changeText ()" funksjonen tar en variabel som heter "monsterName" som et argument:

<Html>

<Head>

<Script type = "text / javascript">

funksjon changeText (monsterName)

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Rediger "changeText" -funksjonen. Bruk "document.getElementById" funksjonen for å endre "innerhtml" eiendom for feltet som heter "textToChange." Den "textToChange feltet inneholder teksten oppdatert med variabelen" monsterName ":

<Html>

<Head>

<Script type = "text / javascript">

funksjon changeText (monsterName)

{

document.getElementById ( 'textToChange') innerhtml = monsterName.;

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Legg en "<p>" tag mellom HTML "<body>" og "</ body>" koder. Skriv inn litt tekst som viser meldingen - som for eksempel "Min favoritt monster er:" - og lukk "</ p>" tag. Pass på å ha et mellomrom etter kolon og før "</ p>" tag å skille meldingen fra dynamisk tekst:

<Html>

<Head>

<Script type = "text / javascript">

funksjon changeText (monsterName)

{

document.getElementById ( 'textToChange') innerhtml = monsterName.;

}

</ Script>

</ Head>

<Body>

<P> Min favoritt monster er: </ p>

</ Body>

</ Html>

6 Skriv en åpen "<b>" tag mellom "<p>" og "</ p>" etter "Min favoritt monstor er:" tags melding. Tildele en "id" til "<b>" tag og sette verdien til "textToChange." For eksempel, skriv inn teksten "Dracula" etter "<b>" tag og lukk "</ b>" tag:

<Html>

<Head>

<Script type = "text / javascript">

funksjon changeText (monsterName)

{

document.getElementById ( 'textToChange') innerhtml = monsterName.;

}

</ Script>

</ Head>

<Body>

<P> Min favoritt monster er: <b id = 'textToChange'> Dracula </ b> </ p>

</ Body>

</ Html>

7 Legg en HTML "<input>" tag etter "<p>" tag. Still inngangstypen til "knapp" og legge til et "onclick ()" hendelse som kaller "changeText" -funksjonen og sender verdien "Frankenstein". Still inngangs feltet "verdi" attributt til "Endre tekst." Lagre og lukk "changeTextVars.html."

<Html>

<Head>

<Script type = "text / javascript">

funksjon changeText (monsterName)

{

document.getElementById ( 'textToChange') innerhtml = monsterName.;

}

</ Script>

</ Head>

<Body>

<P> Min favoritt monster er: <b id = 'textToChange'> Dracula </ b> </ p>

<Input type = "knappen" onclick = 'changeText ( "Frankenstein") "value =" Change Text ">

</ Body>

</ Html>

8 Åpne "changeTextVars.html" i en nettleser. Klikk på "Change Text" -knappen for å bruke "monsterName" variabel å endre "textToChange" -feltet fra "Dracula" til "Frankenstein".

Hint

  • Javascript variabler trenger ikke å bli erklært før du bruker dem. Men ved å bruke den "var" søkeord første gang du bruker en variabel som brukes er en god praksis, som det dokumenterer hvor variabelen er først brukt i koden.
  • Javascript variablene er store og små bokstaver, og må begynne med en bokstav eller understrek.
  • Variabler i Javascript ha spesifikke omfangsreglene.
  • Hvis en Javascript variabel allerede er erklært, kan du erklære dem igjen uten å kjøre inn problemer med Javascript. Hold orden på variabeldeklarasjoner og oppgaver for å unngå uventede resultater og vanskelige å finne koden feil.