JavaScript - un script que no está bien montado

 
Vista:

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 17/06/2019 11:44:14
tengo un problema con un script que, al montarlo en divi, incluyendo el código en un módulo, ese módulo aparece al final de la página, y no a la mitad

los de soporte me dicen que revise el código, y al mínimo cambio que le hago ya deja de funcionar

el funcionamiento básico es mostrar tres imágenes aleatorias de un repositorio de veintidós

este es el código:

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
43
44
45
46
47
48
49
50
51
52
53
54
<script language="Javascript">
var i, n=22; //n is the number of total figures (never input less than 3)
var folder="https://www.xxxxxx.com/imagen/ejemplos/";
var card= new Array(4);
var cardr= new Array(4);
var title= new Array(n);
title[0]="figura 0"
title[1]="figura 1";
title[2]="figura 2";
title[3]="figura 3";
title[4]="figura 4";
title[5]="figura 5";
title[6]="figura 6";
title[7]="figura 7";
title[8]="figura 8";
title[9]="figura 9";
title[10]="figura 10";
title[11]="figura 11";
title[12]="figura 12";
title[13]="figura 13";
title[14]="figura 14";
title[15]="figura 15";
title[16]="figura 16";
title[17]="figura 17";
title[18]="figura 18";
title[19]="figura 19";
title[20]="figura 20";
title[21]="figura 21";
card[1] = Math.floor (Math.random() * n + 1);
if(card[1]<10)
cardr[1] = "0" + card[1];
else
cardr[1] = card[1];
do{
card[2] = Math.floor (Math.random() * n + 1);}
while(card[2]==card[1])
if(card[2]<10)
cardr[2] = "0" + card[2];
else
cardr[2] = card[2];
do{
card[3] = Math.floor (Math.random() * n + 1);}
while(card[3]==card[2]||card[3]==card[1])
if(card[3]<10)
cardr[3] = "0" + card[3];
else
cardr[3] = card[3];
document.write('<center><table border=0 cellpadding="0" cellspacing="0" ><tr>');
for(i=1;i<=3;i++)
{
document.write('<td bgcolor="#ffffff"> <center>');
document.write('<span style="color: #f056ec; font-weight: normal; font-family: avenir next;"><a href="https://www.xxxxx.com/imagen/ejemplos/a'+cardr[i]+'.jpg" style=color:"#ea33d5" target="descript"><img src="'+folder+'a'+cardr[i]+'.jpg" width="267" height="501" border="0"></a>'); document.write('<table border="0" color="ffffff" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff" <center>'+title[card[i]]+'</center></td></tr></table></center></td>');
 }
</script>

¿sabéis decirme qué falla? ¿hay algo mal cerrado y por eso el código se muestra al final, bajo el footer de wordpress?

¡gracias!
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: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

un script que no está bien montado

Publicado por joel (895 intervenciones) el 17/06/2019 12:55:18
Según veo Carlos, publicas el resultado de tu script con document.write(), que siempre te añade al final... puede ser ese el problema?

Porque no defines un elemento con un id en la posición de la pantalla que quieras, y envias ahi el resultado de tu script con document.getElementById() en vez de con document.write()?
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 17/06/2019 13:10:34
¿cómo definir ese elemento, qué debo incluir?

gracias otra vez
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
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

un script que no está bien montado

Publicado por joel (895 intervenciones) el 18/06/2019 11:06:13
donde quieres que aparezca el resultado de tu js en tu codigo html pon algo así:
1
<div id="resultadojs"></div>

y en tu código js, cambia esta parte:
1
2
3
4
5
6
7
8
...
document.write('<center><table border=0 cellpadding="0" cellspacing="0" ><tr>');
for(i=1;i<=3;i++)
{
document.write('<td bgcolor="#ffffff"> <center>');
document.write('<span style="color: #f056ec; font-weight: normal; font-family: avenir next;"><a href="https://www.xxxxx.com/imagen/ejemplos/a'+cardr[i]+'.jpg" style=color:"#ea33d5" target="descript"><img src="'+folder+'a'+cardr[i]+'.jpg" width="267" height="501" border="0"></a>'); document.write('<table border="0" color="ffffff" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff" <center>'+title[card[i]]+'</center></td></tr></table></center></td>');
}
...
por algo así:
1
2
3
4
5
6
7
8
9
10
...
var resultado='<center><table border=0 cellpadding="0" cellspacing="0" ><tr>';
for(i=1;i<=3;i++)
{
resultado+='<td bgcolor="#ffffff"> <center>';
resultado+='<span style="color: #f056ec; font-weight: normal; font-family: avenir next;"><a href="https://www.xxxxx.com/imagen/ejemplos/a'+cardr[i]+'.jpg" style=color:"#ea33d5" target="descript"><img src="'+folder+'a'+cardr[i]+'.jpg" width="267" height="501" border="0"></a>';
resultado+='<table border="0" color="ffffff" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff" <center>'+title[card[i]]+'</center></td></tr></table></center></td>';
}
document.getElementsById("resultadojs").innerHTML=resultado;
...
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 18/06/2019 12:17:33
hola, gracias por la respuesta, si al final no se soluciona al menos algo estoy aprendiendo

tal y como sugieres, el código quedaría así:

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script language="Javascript">
var i, n=22; //n is the number of total figures (never input less than 3)
var folder="https://www.xxxxxx.com/imagen/ejemplos/";
var card= new Array(4);
var cardr= new Array(4);
var title= new Array(n);
title[0]="figura 0"
title[1]="figura 1";
title[2]="figura 2";
title[3]="figura 3";
title[4]="figura 4";
title[5]="figura 5";
title[6]="figura 6";
title[7]="figura 7";
title[8]="figura 8";
title[9]="figura 9";
title[10]="figura 10";
title[11]="figura 11";
title[12]="figura 12";
title[13]="figura 13";
title[14]="figura 14";
title[15]="figura 15";
title[16]="figura 16";
title[17]="figura 17";
title[18]="figura 18";
title[19]="figura 19";
title[20]="figura 20";
title[21]="figura 21";
card[1] = Math.floor (Math.random() * n + 1);
if(card[1]<10)
cardr[1] = "0" + card[1];
else
cardr[1] = card[1];
do{
card[2] = Math.floor (Math.random() * n + 1);}
while(card[2]==card[1])
if(card[2]<10)
cardr[2] = "0" + card[2];
else
cardr[2] = card[2];
do{
card[3] = Math.floor (Math.random() * n + 1);}
while(card[3]==card[2]||card[3]==card[1])
if(card[3]<10)
cardr[3] = "0" + card[3];
else
cardr[3] = card[3];
<div id="resultadojs"></div>
var resultado='<center><table border=0 cellpadding="0" cellspacing="0" ><tr>';
for(i=1;i<=3;i++)
{
resultado+='<td bgcolor="#ffffff"> <center>';
resultado+='<span style="color: #f056ec; font-weight: normal; font-family: avenir next;"><a href="https://www.xxxxx.com/imagen/ejemplos/a'+cardr[i]+'.jpg" style=color:"#ea33d5" target="descript" rel="noopener noreferrer"><img src="'+folder+'a'+cardr[i]+'.jpg" width="267" height="501" border="0"></a>'); document.write('<table border="0" color="ffffff" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff" <center>'+title[card[i]]+'</center></td></tr></table></center></td>';
}
document.getElementsById("resultadojs").innerHTML=resultado;
</script>

pero al ejecutarlo, no funciona. por supuesto, he cambiado xxxxx por el nombre del dominio, pero tras el cambio deja de funcionar

el resultado final son tres títulos de ejemplos [figura 1, 2, 3], que aparecen cada uno en una celda de una tabla de 3 filas

no sé si he colocado mal el div que muestra el resultado, o si debe hacerse de otra forma

gracias otra vez, no me gusta molestar mucho pero esto se me escapa
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
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

un script que no está bien montado

Publicado por joel (895 intervenciones) el 18/06/2019 18:54:55
Hola Carlos, pero el <div> no puedes ponerlo en medio del código javascript... tienes que ponerlo en medio del código HTML donde quieres que se muestre el resultado!!!
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 18/06/2019 18:56:31
te entiendo, pero el resultado debe mostrarse en la tabla de tres filas que te comento... ¿debo incluir esa etiqueta div de alguna forma concreta para mostrar el resultado en la tabla, o se mostraría fuera si lo coloco de otra forma?
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 19/06/2019 11:33:58
nada, he probado un montón de posiciones de la etiqueta div, empezando por colocarla en la tabla que abro con tres filas, y no aparece...
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 20/06/2019 16:40:27
¿alguna idea?
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: 183
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

un script que no está bien montado

Publicado por Yamil Bracho (78 intervenciones) el 20/06/2019 17:01:14
El html generado no esta bien estructurado. falta el fin de linea y el fin del table. Realmente es muy mala idea generar html desde javascript. Lo mejor es que uses algun motor de plantillas como Moustache o JsRender.
He modificado algo el codigo con las correcciones :
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
43
44
45
46
47
48
<script language="Javascript">
 
var i, n=22; //n is the number of total figures (never input less than 3)
var folder="https://www.xxxxxx.com/imagen/ejemplos/";
 
var cars = ["Saab", "Volvo", "BMW"];
var title= [ "figura 0", "figura 1",  "figura 2",  "figura 3",  "figura 4",
			"figura 5",  "figura 6",  "figura 7",  "figura 8",  "figura 9",
			"figura 10", "figura 11", "figura 12", "figura 13", "figura 14";
			"figura 15", "figura 16", "figura 17", "figura 18", "figura 19";
			"figura 20", "figura 21";
 
var card = new Array(4);
var cardr= new Array(4);
 
card[1] = Math.floor (Math.random() * n + 1);
cardr[1] = (card[1] < 10) ? "0" + card[1] : card[1];
 
do {
 card[2] = Math.floor (Math.random() * n + 1);}
while(card[2] == card[1]);
 
cardr[2] = (card[2] < 10) ? "0" + card[2] : card[2];
 
do {
  card[3] = Math.floor (Math.random() * n + 1);}
while(card[3] == card[2] || card[3] == card[1]);
 
cardr[3] = (card[3] < 10) ?  "0" + card[3] : card[3];
 
var html ='<div id="resultadojs"><center><table border=0 cellpadding="0" cellspacing="0" ><tr>';
for (i=1; i<=3; i++) {
   html += '<td bgcolor="#ffffff"> <center>';
   html += '<span style="color: #f056ec; font-weight: normal; font-family: avenir next;">';
   html += '<a href="https://www.xxxxx.com/imagen/ejemplos/a' + cardr[i]+'.jpg" ';
   html += 'style=color:"#ea33d5" target="descript" rel="noopener noreferrer">';
   html += '<img src="' + folder + 'a' + cardr[i] + '.jpg" width="267" height="501" ';
   html += 'border="0"></a>');
 
   html += '<table border="0" color="ffffff" cellpadding="0" cellspacing="0">';
   html += '<tr><td bgcolor="#ffffff" <center>' + title[card[i]] + '</center></td></tr>';
   html += '</table></center></td>';
}
 
html+='</tr></table></div>';
document.write(html);
 
</script>
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

un script que no está bien montado

Publicado por carlos (7 intervenciones) el 20/06/2019 17:37:09
millones de gracias... lo único que he hecho ha sido arreglar el tema de las etiquetas del html invocado, y ha funcionado, ya no se coloca al final del footer

valoro la sugerencia de utilizar esas plantillas, a ver si voy tirando de momento con esto, 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