Usar variable de JavaScript en HTML
- Uso de variables definidas por el usuario de JavaScript en HTML
- Variable de JavaScript cargada desde el indicador
- Crear un elemento de etiqueta a partir de secuencias de comandos y acceso variable a HTML
Las variables de JavaScript a menudo son definidas por el usuario durante la codificación, o puede usar el indicador para obtener datos y almacenarlos en una variable para su uso posterior.
Aquí, mostraremos cómo actuar sobre una variable definida por el usuario y usarla en HTML, y la demostración posterior explicará cómo el aviso puede ayudarnos en este sentido.
Uso de variables definidas por el usuario de JavaScript en HTML
Estamos usando jsbin para los ejemplos de código, y aquí verá que el elemento p se identifica con output id. Inicialmente, la variable myPet está configurada para ser Tobey, y la línea simple posterior se ejecutó en la página web. getElementById encuentra el id preferido, y luego las variables se pasan en el formato inner.HTML para que las variables de JavaScript se puedan usar en el HTML.
Fragmento de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = 'Tobey';
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Producción:
Variable de JavaScript cargada desde el indicador
En este segmento, veremos cómo ingresamos fácilmente el valor en la ventana de solicitud, y eso se muestra directamente en nuestra página web cargada.
Fragmento de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = prompt();
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Producción:
Crear un elemento de etiqueta a partir de secuencias de comandos y acceso variable a HTML
Aquí, crearemos una etiqueta p en el script, que será accesible en el cuerpo HTML. El p.innerHTML es la clave para pasar los datos variables hacia la etiqueta body.
Fragmento de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: gray;
color: white;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
var myPet = prompt('Enter Name');
var nameLength = myPet.length;
p = document.createElement('p');
p.innerHTML = myPet + ' is a ' + nameLength + ' letter name!';
document.body.appendChild(p);
Producción:
