Nwlapcug.com


Come modificare il testo HTML con variabili JavaScript

Come modificare il testo HTML con variabili JavaScript


JavaScript è un linguaggio di scripting lato client che utilizza le variabili che si comportano nello stesso modo che le variabili si comportano in altri linguaggi di programmazione. Variabili JavaScript non devono essere dichiarate prima del loro utilizzo, né hanno bisogno di avere un tipo assegnato o la memoria allocata. È possibile utilizzare variabili JavaScript per contenere i valori per aggiornare la maggior parte degli oggetti della pagina Web in modo dinamico, ad esempio testo o grafica. Inoltre, utilizzare JavaScript per l'aggiornamento "innerHTML" proprietà di un elemento HTML; si tratta di un metodo per cambiare dinamicamente i campi di testo intero al volo.

Istruzioni

1

Aprire un editor di testo e creare un nuovo file denominato "changeTextVars.html." Tipo sei tag HTML nel file:

< html >

< testa >< / testa >

< corpo >< / corpo >

< / html >

Salvare "changeTextVars.html."

2

Inserire un tag di script aperto di JavaScript - "< script >"-- all'interno del tag HTML "< head >". Impostare il "tipo" di tag "< script >" il valore "text/javascript" e chiusura il tag "< / script >":

< html >

< head >

< script type = "text/javascript" >

< / script >

< / head >

< corpo >< / corpo >

< / html >

3

Aggiungere una funzione JavaScript tra il "< script >" e "< / script >" tag denominato "changeText()." La funzione di "changeText()" prende una variabile denominata "monsterName" come argomento:

< html >

< head >

< script type = "text/javascript" >

funzione changeText(monsterName)

{

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

4

Modificare la funzione di "changeText". Utilizzare la funzione di "Document. getElementById" per modificare la proprietà "innerHTML" per il campo denominato "textToChange." Il "textToChange' campo contiene il testo aggiornato con la variabile"monsterName":

< html >

< head >

< script type = "text/javascript" >

funzione changeText(monsterName)

{

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

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

5

Aggiungere un tag "< p >" tra il codice HTML "< body >" e "< / body >" tag. Immettere del testo che Visualizza il messaggio - come "il mio mostro preferito è:"..--e chiudere il tag "</p >". Assicurarsi di includere uno spazio dopo i due punti e prima del tag "</p >" per separare il messaggio dal testo dinamico:

< html >

< head >

< script type = "text/javascript" >

funzione changeText(monsterName)

{

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

}

< / script >

< / head >

< corpo >

< p > il mio mostro preferito è: </p >

< / body >

< / html >

6

Inserire un tag di apertura "< b >" tra la "< p >" e "</p >" tag dopo la "mia monstor preferita è:" messaggio. Assegnare un "id" al tag "< b >" e impostarne il valore su "textToChange." Ad esempio, digitare il testo "Dracula" dopo il tag "< b >" e chiudere il tag "</b >":

< html >

< head >

< script type = "text/javascript" >

funzione changeText(monsterName)

{

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

}

< / script >

< / head >

< corpo >

< p > il mio mostro preferito è: < id b = 'textToChange' > Dracula </b >< / p >

< / body >

< / html >

7

Aggiungere un tag HTML "< input >" dopo il tag "< p >". Impostare il tipo di input su "button" e aggiungere un evento "onclick" che chiama la funzione di "changeText" e passa il valore "Frankenstein". Impostare l'attributo di "valore" del campo di input "Modifica testo". Salvare e chiudere "changeTextVars.html."

< html >

< head >

< script type = "text/javascript" >

funzione changeText(monsterName)

{

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

}

< / script >

< / head >

< corpo >

< p > il mio mostro preferito è: < id b = 'textToChange' > Dracula </b >< / p >

< input type = 'button' onclick='changeText("Frankenstein")' valore = "Modifica testo" >

< / body >

< / html >

8

Aprire "changeTextVars.html" in un browser Web. Fare clic sul pulsante "Modifica testo" per utilizzare la variabile "monsterName" per modificare il campo "textToChange" da "Dracula" di "Frankenstein".

Consigli & Avvertenze

  • Variabili JavaScript non devono essere dichiarate prima di utilizzarli. Tuttavia, utilizzando il "var" parola chiave il primo tempo si utilizza una variabile utilizzata è una buona pratica, come documenti in cui la variabile è in primo luogo utilizzata nel codice.
  • Variabili JavaScript sono maiuscole e minuscole e devono iniziare con una lettera o un carattere di sottolineatura.
  • Variabili in JavaScript hanno regole di ambito specifico.
  • Se già è stata dichiarata una variabile JavaScript, è possibile dichiarare nuovamente senza incorrere in problemi con JavaScript. Tenere traccia di dichiarazioni di variabili e assegnazioni per evitare risultati imprevisti e bug di codice difficile da trovare.