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.