-
Cómo cambiar texto HTML con variables de JavaScript
-
JavaScript es un lenguaje de script del lado del cliente que utiliza variables que se comportan de la misma manera que las variables se comportan en otros lenguajes de programación. las variables JavaScript no necesitan ser declaradas antes de usarlos, ni se necesita tener un tipo asignado o memoria asignada. Puede utilizar variables JavaScript para contener valores con el fin de actualizar la mayoría de los objetos de la página web de manera dinámica, como texto o gráficos. Además, el uso de JavaScript para actualizar la propiedad de un elemento HTML "innerHTML"; este es un método para cambiar dinámicamente los campos de texto completo sobre la marcha.Instrucciones
1 Abra un editor de texto y crear un nuevo archivo llamado "changeTextVars.html." Escriba seis etiquetas HTML en el archivo:
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
Guardar "changeTextVars.html."
2 Coloque una etiqueta de script JavaScript abierta - "<script>" - dentro de la etiqueta HTML "<head>". Establecer valor "tipo" de la etiqueta "<script>" a "text / javascript" y cierre el "</ script>" tag:
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Añadir una función de JavaScript entre los "<script>" y "<script />" etiquetas de nombre "changeText ()". El "changeText ()" función toma una variable llamada "Monstername" como argumento:
<Html>
<Head>
<Script type = "text / javascript">
función changeText (Monstername)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Editar la función "changeText". Utilice la función "document.getElementById" para cambiar la propiedad "innerHTML" para el campo denominado "textToChange." El "campo textToChange 'sostiene el texto actualizado con la variable" Monstername ":
<Html>
<Head>
<Script type = "text / javascript">
función changeText (Monstername)
{
document.getElementById ( 'textToChange') innerHTML = Monstername.;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Añadir una etiqueta "<p>" entre el HTML "<body>" y "</ body>" etiquetas. Introduzca un texto que muestra el mensaje - como "Mi monstruo favorito es:" - y cerrar la etiqueta "</ p>". Asegúrese de incluir un espacio después de los dos puntos y antes de la "</ p>" etiqueta para separar el mensaje del texto dinámico:
<Html>
<Head>
<Script type = "text / javascript">
función changeText (Monstername)
{
document.getElementById ( 'textToChange') innerHTML = Monstername.;
}
</ Script>
</ Head>
<Body>
<P> Mi monstruo favorito es: </ p>
</ Body>
</ Html>
6 Introduzca una etiqueta abierta "<b>" entre el y "</ p>" etiquetas después de que el "Mi Monstor favorita es:" "<p>" mensaje. Asignar un "id" a la etiqueta "<b>" y establezca su valor en "textToChange." Por ejemplo, escriba el texto "Drácula" después de la etiqueta "<b>" y cerrar la etiqueta "</ b>":
<Html>
<Head>
<Script type = "text / javascript">
función changeText (Monstername)
{
document.getElementById ( 'textToChange') innerHTML = Monstername.;
}
</ Script>
</ Head>
<Body>
<P> Mi monstruo favorito es: <b id = 'textToChange'> Drácula </ b> </ p>
</ Body>
</ Html>
7 Añadir una etiqueta HTML "<input>" etiqueta después de la etiqueta "<p>". Establecer el tipo de entrada a "botón" y añade "onclick ()" evento que llama a la función "changeText" y pasa el valor "Frankenstein". Establecer el "valor" campo de entrada atribuir a "texto del cambio". Guarde y cierre "changeTextVars.html."
<Html>
<Head>
<Script type = "text / javascript">
función changeText (Monstername)
{
document.getElementById ( 'textToChange') innerHTML = Monstername.;
}
</ Script>
</ Head>
<Body>
<P> Mi monstruo favorito es: <b id = 'textToChange'> Drácula </ b> </ p>
<Input type = "botón" onclick = 'changeText ( "Frankenstein") "value =" texto del cambio ">
</ Body>
</ Html>
8 Abrir "changeTextVars.html" en un navegador Web. Haga clic en el botón "Cambiar texto" para utilizar la variable "Monstername" para cambiar el campo "textToChange" de "Drácula" de "Frankenstein".
Consejos y advertencias
- las variables JavaScript no necesitan ser declaradas antes de usarlos. Sin embargo, el uso de la "var" palabra clave la primera vez que se utiliza una variable utilizada es una buena práctica, ya que documenta que la variable se utiliza por primera vez en el código.
- las variables JavaScript entre mayúsculas y minúsculas y deben comenzar con una letra o un guión bajo.
- Las variables en JavaScript tienen reglas de ámbito específicas.
- Si una variable de JavaScript ya se ha declarado, se puede declarar otra vez sin tropezar con problemas con JavaScript. Mantenga un registro de las declaraciones de variables y asignaciones para evitar resultados inesperados y errores de código que son difíciles de encontrar.
