Cómo realizar con Javascript y las propiedades innerText e innerHTML un bloque de contenido que cambia de manera aleatoria en cada visita que se haga en la página.
Realizamos un sencillo script en Javascript para realizar un cuadro con información dinámica, que cambia con cada impresión de la página. El ejercicio consiste en un bloque HTML que muestra una información que cambia de manera aleatoria para generar una sensación de actualización en cada página vista. Usaremos Javascript para que nos proporcione un texto aleatorio, que luego imprimiremos dentro del bloque correspondiente.
Cómo generar un texto aleatorio
Para empezar vamos a ver cómo obtener un texto aleatorio. Para ello haremos una función que se encargue de ese trabajo, de modo que podríamos reutilizarla las veces que haga falta.
La idea a desarrollar es bien simple. Creamos un array con los distintos textos, entre los que se escogerá uno aleatoriamente. Se obtiene un valor numérico aleatorio entre 0 y máximo índice del array y se devuelve el texto que hay en el array en esa posición aleatoria.
function texto_aleatorio() {
var textos = [];
textos[0] = "Tenemos los mejores productos del mercado, con controles de calidad intensivos."
textos[1] = "Distribuimos en todo el mundo con los mejores tiempos de entrega y fiabilidad de los envíos."
textos[2] = "No tenemos competidores que nos hagan sombra. Contrate con nosotros y compuébelo. Así de fácil."
textos[3] = "Disponga del mejor servicio de atención al cliente y una respuesta rápida a sus problemas."
textos[4] = "Los mejores servicios, productos y, como no, los menores precios. Todo son ventajas."
aleat = Math.random() * (textos.length)
aleat = Math.floor(aleat)
return textos[aleat];
}
En la primera línea se crea el array y en las siguientes se inicializan sus distintas casillas con textos variados. Tal como hemos hecho el ejercicio, el número de casillas que tenga el array es indiferente, por lo que podríamos aumentar sus casillas, introduciendo nuevas frases, y así las posibilidades de textos serán más variadas.
Más adelante en la función se obtiene un número aleatorio. Para obtenerlo utilizamos la clase Math, concretamente el método random(). Random devuelve un valor decimal aleatorio entre 0 y 1. Algo como 0.453. Si multiplicamos ese valor por el número de casillas del array obtendremos un número entre 0 y el número de casillas, pero todavía tiene valores decimales y nosotros deseamos que sea entero para poder utilizarlo como índice en el array. Para convertir ese valor a entero, lo redondeamos hacia abajo con floor(), que devuelve el número más próximo, redondeando por abajo.
Tienes un taller en el que se explica con más detalle la generación de números aleatorios con Javascript.
En las última línea de la función se devuelve el valor aleatorio.
El código HTML del bloque donde colocaremos el texto
Ahora vamos a ver el código HTML del recuadro donde aparecerá el texto aleatorio. No tiene demasiado misterio. Simplemente muestra un encabezado o titular del bloque y un párrafo donde aparecerá luego el texto aleatorio.
<div class="bloque">
<h2>Nuestras ventajas</h2>
<p id="textoAleatorio"></p>
</div>
Solo tenemos que fijarnos que hay un párrafo que tiene un identificador <p id="textoAleatorio">. Ese identificador es importante porque nos permitirá referirnos al párrafo de manera inequívica.
Modificar el texto del párrafo para colocar el contenido aleatorio
Ya solo nos queda usar la función que hemos creado para obtener un texto aleatorio, que vamos a volcar el párrafo. Para eso usamos el método getElementById() del objeto document, indicando el identificador del elemento al que nos queremos referir. Una vez tenemos el elemento le colocamos el valor del texto aleatorio que nos da la función modificando su propiedad innerText.
document.getElementById('textoAleatorio').innerText = texto_aleatorio();
Todo el taller de contenido aleatorio junto
Hemos hecho una ejemplo muy sencillo, pero para que quede más claro vamos a ver toda la página HTML que incluye el código explicado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recuadro dinámico con texto que cambia</title>
</head>
<body>
<div class="bloque">
<h2>Nuestras ventajas</h2>
<p id="textoAleatorio"></p>
</div>
<script>
function texto_aleatorio() {
var textos = [];
textos[0] = "Tenemos los mejores productos del mercado, con controles de calidad intensivos."
textos[1] = "Distribuimos en todo el mundo con los mejores tiempos de entrega y fiabilidad de los envíos."
textos[2] = "No tenemos competidores que nos hagan sombra. Contrate con nosotros y compuébelo. Así de fácil."
textos[3] = "Disponga del mejor servicio de atención al cliente y una respuesta rápida a sus problemas."
textos[4] = "Los mejores servicios, productos y, como no, los menores precios. Todo son ventajas."
aleat = Math.random() * (textos.length)
aleat = Math.floor(aleat)
return textos[aleat];
}
document.getElementById('textoAleatorio').innerText = texto_aleatorio();
</script>
</body>
</html>
Tener en cuenta que hay que actualizar la página para ver como van mostrandose distintos mensajes, entre todos los que hemos configurado.
Este ejemplo puede complicarse todo lo que se desee para crear páginas dinámicas que cambien los contenidos entre distintos accesos del visitante. Con muy poquitos cambios podríamos hacer que incluyesen diferentes elementos aleatorios, como imágenes, animaciones, enlaces, etc.
Usando la propiedad innerHTML
Solo un detalle más antes de acabar. Imaginemos que quieres poner negritas en el texto aleatorio, o imágenes, listas o cosas similares. Con el código que hemos visto no sería suficiente, porque innerText solo acepta modificar el texto (texto plano) de los elementos.
Entonces, si el contenido del texto que queremos cambiar contiene código HTML y no un simple texto, en vez de actualizar el contenido modificando la propiedad innerText, tenemos que modificar la propiedad innerHTML.
document.getElementById('textoAleatorio').innerHTML = texto_aleatorio();
Realmente podríamos haber usado directamente innerHTML, ya que también modificaría correctamente un simple texto, pero innerText es más segura porque no acepta etiquetas HTML y no te pueden hacer ataques por inyección de código XSS.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...