JavaScript - repetir X veces un appendChild()

 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 13 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

repetir X veces un appendChild()

Publicado por Carlos (2 intervenciones) el 01/03/2020 23:27:40
Buenas,

Escribiendo un programa he querido repetir varias veces dentro de un bucle un appendChild() pero solo lo ejecutaba una vez.

Buscando ejemplos y jugando con mil opciones, encontré que si se pone un innerHTML después, en la siguiente repetición sí funciona el appendChild() la cantidad de veces que se repite el bucle for.

¿Alguien podría por favor explicarme el por qué de este comportamiento?

Gracias

Aquí el código de ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
</head>
<body>
	<div id="resultado"></div>
 
<script >
 
class Billete
{
	// atributos
	constructor (valor, cantidad)
	{
		//this.imagen = new Image();
		this.imagen = document.createElement('img');
		this.valor = valor;
		this.cantidad = cantidad;
		this.imagen.src = "EUR_" + this.valor + ".jpg";
		this.imagen.height = 80;
	}
 
	// metodos
	mostrar()
	{
		return this.imagen;
	}
}
 
var billete = new Billete(50,5);
 
var res = document.getElementById("resultado");
 
for(var i = 0; i < 3; i++){
	var nuevoBillete = billete.mostrar();
	res.appendChild(nuevoBillete);
	res.innerHTML += " "; // <<<< porqué es necesario innerHTML para que se repita "la impresión" de los billetes??????
}
	</script>
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 2.600
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

repetir X veces un appendChild()

Publicado por joel (585 intervenciones) el 02/03/2020 09:05:09
Hola Carlos, la verdad es que no se muy bien cual es el problema... no termino de entenderlo, pero yo no lo haria como lo has hecho, de crear la imagen en el constructor, yo crearia la imagen en la función mostrar(), y así si que funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
</head>
<body>
	<div id="resultado"></div>
 
<script >
 
class Billete
{
	// atributos
	constructor (valor, cantidad)
	{
		this.valor = valor;
		this.cantidad = cantidad;
	}
 
	// metodos
	mostrar()
	{
        var imagen = document.createElement('img');
		imagen.src = "EUR_" + this.valor + ".jpg";
		imagen.height = 80;
		return imagen;
	}
}
 
var billete = new Billete(50,5);
 
var res = document.getElementById("resultado");
 
for(var i = 0; i < 3; i++){
	var nuevoBillete = billete.mostrar();
	res.appendChild(nuevoBillete);
}
	</script>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 5
Ha aumentado su posición en 13 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

repetir X veces un appendChild()

Publicado por Carlos (2 intervenciones) el 21/03/2020 12:49:14
Buenas,

Primero, gracias y sorry por demorarme en contestar, el curro es lo que tiene :(

Con tu cambio me ha generado ahora una duda de concepto de Clases:

¿No debería ir en el constructor todo lo relacionado con la creación del objeto y sus atributos?
¿No deberían ir en las "funciones" (métodos) solo las "acciones" que se realizan sobre esos objetos ya construidos?

Si he entendido bien, con tu cambio lo que hace ahora es crear una imagen nueva dentro del bucle y que con res.appendChild(nuevoBillete) pinta ese nueva imagen.. es así?.

Regresando a mi pregunta original, lo que quiero entender es porqué de la forma que escribo el código sólo se "pinta" un billete y no 3 billetes.

Adjunto en zip los 2 ejemplo, de arriba, el que funciona OK y el que no funciona KO

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar