problema con dado

roser24 · #1 (**permalink**) 04/01/2011, 06:28

Muy buenas tardes,

de antemano muchas gracias por leer mi post y muchisimas gracias a los que respondais a mi problemita.

tengo que realizar una web en la que al dar a un boton me visualize un numero y asociado a ese numero la imagen de un dado.pero no se cmo hacerlo .
hasta ahora mi codigo es :

Código Javascript:

Ver original<html>
<head><title>Dado</title>
<script>
function aleatorio(inferior,superior){
numposibilidades=superior-inferior;
aleat=Math.random()*numposibilidades;
aleat=Math.floor(aleat);
return parseInt(inferior)+aleat;
 
}
function calcula(){
var num=aleatorio(1,7);
document.f1.numero.value=num;
if(document.image.src==cambiar_img[num-1]){
return document.image.src=cambiar_img[num];
}
 
}
var cambiar_img=new Array();
cambiar_img[0]="dado1.jpg";
cambiar_img[1]="dado2.jpg";
cambiar_img[2]="dado3.jpg";
cambiar_img[3]="dado4.jpg";
cambiar_img[4]="dado5.jpg";
cambiar_img[5]="dado6.jpg";
</script>
</head>
<body>
<form name="f1"action="dado.html" method=GET>
<input type="button" onclick="calcula();"value="lanzar">
<input type="text" name=numero>
</form>
<img src="dado1.jpg">
 
</body>
</html>

besos y feliz año 2011 a todos.

kbmaster · #2 (**permalink**) 04/01/2011, 13:38

var cambiar_img=new Array();
//al usar el objeto Image conseguis q las imagenes se precarguen en memoria
cambiar_img[0]=new Image().src="dado1.jpg";
cambiar_img[1]=new Image().src="dado2.jpg";
cambiar_img[2]=new Image().src="dado3.jpg";
cambiar_img[3]=new Image().src="dado4.jpg";
cambiar_img[4]=new Image().src="dado5.jpg";
cambiar_img[5]=new Image().src="dado6.jpg";

function calcula(numcaras)
{
//javascript ya cuenta con funciones generadoras de numeros aleatorios
resultado = Math.floor(Math.random()*(numcaras));
document.getElementById('resultado').innerHTML="<i mg src='"+cambiar_img[resultado]+"'>";
}

En tu html podes usar un contenedor para el resltado y un boton para lanzar la funcion:

<div id='resultado'>
</div>

<input type="button" onclick="calcula(6);" value="lanzar"/>

roser24 · #3 (**permalink**) 04/01/2011, 16:16

Muchas gracias por la ayuda kbmaster

,ahora mismo lo probare.un beso

roser24 · #4 (**permalink**) 04/01/2011, 17:10

hola nuevamente kbmaster una preguntilla
las lineas:
document.getElementById('resultado').innerHTML="<i mg src='"+cambiar_img[resultado]+"'>";
}

lo de innerHTML y getelemtbyid son de DHTMl no? habria forma de hacer la funcion sin usar dhtml? solo usando javascript?

_cronos2 · #5 (**permalink**) 04/01/2011, 17:24

Que yo sepa, DHTML es JS, y getelementByID() e innerHTML son JS.
Saludos (:

roser24 · #6 (**permalink**) 05/01/2011, 05:03

hola crono,umm no se a lo mejor si van de la mano pero que sean lo mismo por los manuales que he visitado creo que no..umm bueno en fin hize unas modificaciones en mi codigo y ahora ya me funciona correctamente aunque con una pequeña trampa..

ya que use eval y segun me aconsejaron es mejor no usar ese comodin para aprender mas..
mi codigo es:

Código Javascript:

Ver original<html>
<head><title>Dado</title>
<script>
function aleatorio(inferior,superior){
numposibilidades=superior-inferior;
aleat=Math.random()*numposibilidades;
aleat=Math.floor(aleat);
return parseInt(inferior)+aleat;
 
}
function calcula(){
var num=aleatorio(1,6);
document.images["mi"].src=eval("camb"+num+".src");
}
 
 
var camb0=new Image();
camb0.src="dado1.jpg";
var camb1=new Image();
camb1.src="dado2.jpg";
var camb2=new Image();
camb2.src="dado3.jpg";
var camb3=new Image();
camb3.src="dado4.jpg";
var camb4=new Image();
camb4.src="dado5.jpg";
var camb5=new Image();
camb5.src="dado6.jpg";
</script>
</head>
<body>
<img src="dado1.jpg" name="mi">
<form name="f1"action="dado.html" method=GET>
<input type="button" onclick="calcula();"value="lanzar">
 
</form>
 
 
</body>
</html>

he probado en lugar de usar el eval : document.images["mi"].src=eval("camb"+num+".src");
poniendo ="camb"+parseInt(num)+".src"; pero no se lo traga javascript y a mi me parece lo mismo... en fin si alguno sabe el porque no es igual las lineas:
document.images["mi"].src=eval("camb"+num+".src");
y
document.images["mi"]..src="camb"+parseInt(num)+".src");

Muchas gracias a todos.

_cronos2 · #7 (**permalink**) 05/01/2011, 08:32

Sin eval se me ocurren dos maneras de hacerlo, con arrays (la más sencilla, y no entiendo por qué tienes 6 variables sueltas en vez de un array), o mediante coleeciones.

Código Javascript:

Ver originaldocument.images["mi"].src=camb[num].src;
// o
document.images["mi"].src=window['camb'+num].src;

Saludos (:

roser24 · #8 (**permalink**) 06/01/2011, 07:05

hola cronos primeramente gracias por responder.use variables porque no se porque pero si usaba un array no veia errores en la consola de errores de firefox pero simplemente no cambiaba la imagen del dado.
con las variables y el eval si tira la pagina..
probe con la linea document.images["mi"].src=window['camb'+num].src;
y funciona perfectamente.Graciasssssssss