Frase cambiante en el subtítulo

Ununhexio · #1 (**permalink**) 12/03/2015, 05:22

Hola a todos,

Lo primero, dar las gracias por adelantado. Ahora viene mi problema, que seguro tiene fácil solución, pero como soy un novato con javascript, no entiendo nada, ahí va.

Quiero que el subtítulo de mi web tenga una frase que vaya cambiando cada cierto tiempo, para ello, tengo esta función en un archivo .js externo (no la he programado yo, la he sacado de la red)

Código:

var indice = 0;
		frases = new Array();
		frases[0] = "TEXTO FRASE 0<br>-AUTOR 0"
		
		frases[1] = "TEXTO FRASE 1<br>-AUTOR 1"
		
		frases[2] = "TEXTO FRASE 2<br>-AUTOR 2"
		
		indice = Math.random()*(frases.length);
		indice = Math.floor(indice);
		
		function rotar() {
			if (indice == frases.length) {indice = 0;}
			document.getElementById("rotando").innerHTML = frases[indice];
			indice++;
			setTimeout('rotar();',10000);

Bien, ahora llamo a la función en mi web así:

Código:

<html>
<head>
	<script type="text/javascript" src="pruebafrase.js">
		
	</script>
</head>
<body>
<script language="JavaScript">
 rotar();
</script>
</body>
</html>

Y el resultado es que no me escribe absolutamente nada.

¿Me podrían ayudar, por favor?

Gracias.

_intal_ · #2 (**permalink**) 12/03/2015, 09:16

En el html te hace falta la etiqueta con el ID “rotando” que contendrá el título.

El html quedaría así, checa que el cambio fue el h1:

Código HTML:

<html>
<head>
	<script>
		var indice = 0;
		var frases = new Array();

		frases[0] = "TEXTO FRASE 0<br>-AUTOR 0"

		frases[1] = "TEXTO FRASE 1<br>-AUTOR 1"

		frases[2] = "TEXTO FRASE 2<br>-AUTOR 2"

		indice = Math.random()*(frases.length);
		indice = Math.floor(indice);

		function rotar() {
			if (indice == frases.length) {indice = 0;}
			document.getElementById("rotando").innerHTML = frases[indice];
			indice++;
			setTimeout(rotar,10000);
		}
	</script>
</head>
<body>
<h1 id="rotando"></h1>
<script language="JavaScript">
 rotar();
</script>
</body>
</html>

Pantaláimon · #3 (**permalink**) 12/03/2015, 11:12

Orientado a objetos: https://jsfiddle.net/hct6q5ce/

Código HTML:

Ver original<h1 id="rotando"></h1>
<script>
var rotor = new Rotor ({
    id: 'rotando',
    interval: 1000,
    frases: [
        "TEXTO FRASE 0<br>-AUTOR 0",
        "TEXTO FRASE 1<br>-AUTOR 1",
        "TEXTO FRASE 2<br>-AUTOR 2"
    ]
});
 
rotor.play();
</script>

Código Javascript:

Ver originalfunction Rotor(options) {
    if (!(this instanceof Rotor)) {
        return new Rotor(options)
    }
    
    this.frases   = options.frases
    this.elem     = document.getElementById(options.id) //|| options.elem
    this.interval = options.interval
    this.indice   = Math.floor(Math.random() * this.frases.length)
}
 
Rotor.prototype.play = function () {
    if (this.indice === this.frases.length) {
        this.indice = 0
    }
    this.elem.innerHTML = this.frases[this.indice]
    console.log(this.indice)
    ++this.indice
    setTimeout(this.play.bind(this), this.interval)
}