Sådan ændres HTML tekst med JavaScript variabler

December 22

Sådan ændres HTML tekst med JavaScript variabler


JavaScript er et klient-side scripting sprog, der bruger variabler, der opfører sig på samme måde, som variabler opfører sig i andre programmeringssprog. JavaScript variabler behøver ikke at blive erklæret før du bruger dem, heller ikke brug for at have en tildelt type eller tildelte hukommelse. Du kan bruge JavaScript variabler til at holde værdier for at opdatere de fleste webside objekter dynamisk, såsom tekst eller grafik. Hertil kommer, bruge JavaScript til at opdatere et HTML-element er "innerHTML" ejendom; dette er en fremgangsmåde til dynamisk skiftende hele tekstfelter på flue.

Instruktioner

1 Åbn en teksteditor og oprette en ny fil med navnet "changeTextVars.html." Type seks HTML-tags i filen:

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

Gem "changeTextVars.html."

2 Placer et JavaScript åbent script tag - "<script>" - inde i HTML "<head>" tag. Indstil "<script>" tag s "type" værdi "text / javascript" og luk "</ script>" tag:

<Html>

<Head>

<Script type = "text / javascript">

</ Script>

</ Head>

<Body> </ body>

</ Html>

3 Tilføj en JavaScript-funktion mellem "<script>" og "</ script>" tags navnet "changeText ()." Den "changeText ()" funktion tager en variabel med navnet "monsterName" som et argument:

<Html>

<Head>

<Script type = "text / javascript">

funktion changeText (monsterName)

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Rediger "changeText" funktion. Brug "document.getElementById" funktion til at ændre "innerHTML" ejendom til feltet med navnet "textToChange." Den "textToChange 'felt holder teksten opdateret med variablen" monsterName ":

<Html>

<Head>

<Script type = "text / javascript">

funktion changeText (monsterName)

{

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

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Tilføj en "<p>" tag mellem HTML "<body>" og "</ body>" tags. Indtast noget tekst, der viser meddelelsen - såsom "Min favorit monster er:" - og luk "</ p>" tag. Vær sikker på at inkludere et mellemrum efter kolon og før "</ p>" tag til at adskille budskabet fra den dynamiske tekst:

<Html>

<Head>

<Script type = "text / javascript">

funktion changeText (monsterName)

{

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

}

</ Script>

</ Head>

<Body>

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

</ Body>

</ Html>

6 Indtast en åben "<b>" tag mellem "<p>" og "</ p>" tags efter "Min favorit monstor er:" budskab. Tildel et "id" til "<b>" tag og sæt dens værdi til "textToChange." For eksempel, skriv teksten "Dracula" efter "<b>" tag og luk "</ b>" tag:

<Html>

<Head>

<Script type = "text / javascript">

funktion changeText (monsterName)

{

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

}

</ Script>

</ Head>

<Body>

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

</ Body>

</ Html>

7 Tilføj en HTML "<input>" tag efter "<p>" tag. Indstil input type til "knappen", og tilføj en "onclick ()" begivenhed, der kalder "changeText" funktion og passerer værdien "Frankenstein". Indstil indtastningsfeltet "værdi" tillægge "Ændre tekst." Gem og luk "changeTextVars.html."

<Html>

<Head>

<Script type = "text / javascript">

funktion changeText (monsterName)

{

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

}

</ Script>

</ Head>

<Body>

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

<Input type = "knap" onclick = 'changeText ( "Frankenstein") "value =" Skift tekst ">

</ Body>

</ Html>

8 Åbn "changeTextVars.html" i en webbrowser. Klik på knappen "Skift tekst" for at bruge "monsterName" variabel at ændre "textToChange" felt fra "Dracula" til "Frankenstein".

TIPS

  • JavaScript variabler behøver ikke at blive erklæret før du bruger dem. Men ved hjælp af "var" søgeord det første gang du bruger en variabel anvendes, er en god praksis, da det dokumenterer, hvor variablen er første gang brugt i koden.
  • JavaScript variabler er små bogstaver og skal begynde med et bogstav eller en understregning.
  • Variabler i JavaScript har konkrete omfang regler.
  • Hvis der allerede er erklæret en JavaScript-variabel, kan du erklære dem igen uden at løbe ind i problemer med JavaScript. Hold styr på variable erklæringer og opgaver for at undgå uventede resultater og svære at finde kode bugs.

relaterede artikler