3

Se van mostrando a través del botón los diferentes valores del array que presento pero necesitaría sustituir las palabras por ejemplo "manzana" por una imagen, pero que también continúe saliendo el valor porque más tarde se tendrán que comparar, es posible? Dejo el código:

var cards = new Array(
 new Array("manzana", 1),
 new Array("manzana", 2),
 new Array("manzana", 3), 
 new Array("pera", 1),
 new Array("pera", 2),
 new Array("pera", 3),
 new Array("melon", 1),
 new Array("melon", 2),
 new Array("melon", 3)
);

function random_card(){
    if(cards.length > 0){
        var rand = Math.floor(Math.random()*cards.length);
        var html = "card: "+cards[rand][0]+"<br/>points: "+cards[rand] [1]+"<br/><br/>";
        document.getElementById("myDiv").innerHTML += html;
        cards.splice(rand, 1);
     }
}

 <div id="myDiv"></div>
 <button onclick="random_card();">Hit</button>
2
  • No se entiende la pregunta. Quieres sustituir la palabra por una imagen, pero en tu código no hay una etiqueta img dentro del html. Segundo, quieres que siga saliendo el valor. ¿Significa que quieres mantener el array original o te basta con lo que ya estás haciendo, que es anteponer el valor en el html insertado?
    – ffflabs
    Commented el 31 may. 2018 a las 12:02
  • hola! @amenadiel ! lo que quería es lo que ha comentado el compañero Enrique, gracias!
    – Vero Soler
    Commented el 31 may. 2018 a las 12:06

2 respuestas 2

2

sí es posible. En vez de la palabra manzana, puedes poner por ejemplo el nombre de la imagen "manzanas.jpg" (por ejemplo, suponiendo que las imágenes las guardas todas en la misma carpeta), de forma que quedaría el array:

var cards = new Array(
 new Array("manzana.jpg", 1),
 new Array("manzana.jpg", 2),
 new Array("manzana.jpg", 3), 
 new Array("pera.jpg", 1),
 new Array("pera.jpg", 2),
 new Array("pera.jpg", 3),
 new Array("melon.jpg", 1),
 new Array("melon.jpg", 2),
 new Array("melon.jpg", 3)
);

Y después a la hora de crear el html hacer (suponiendo que la carpeta de las imágenes la llamas img y está al mismo nivel que donde tienes el archivo que enseñas):

 function random_card(){
            if(cards.length > 0){
            var rand = Math.floor(Math.random()*cards.length);
            var html = "card: <img src='./img/"+cards[rand][0]+"' /><br/>points: "+cards[rand] [1]+"<br/><br/>";
            document.getElementById("myDiv").innerHTML += html;
            cards.splice(rand, 1);
            }
      }

Y ya simplemente lo demás dejarlo tal cual:

<div id="myDiv"></div>
 <button onclick="random_card();">Hit</button>

Si la ayuda de este post te ha servido, buen check verde y flecha arriba son bienvenidos :)

2
  • Hola Enrique mil gracias no había hecho lo de la carpeta en la variable muchas gracias por tu ayuda y rapidez!
    – Vero Soler
    Commented el 31 may. 2018 a las 12:04
  • 1
    te invito a leer el comportamiento del sitio, en la cual dice No uses firmas, taglines o saludos. Commented el 31 may. 2018 a las 13:41
2

Te propongo este cambio:

var cards = [
    { name: "manzana", points: 1, img: "http://www.dummy.com/manzana.jpg" },
    { name: "manzana", points: 2, img: "http://www.dummy.com/manzana.jpg" },
    { name: "manzana", points: 3, img: "http://www.dummy.com/manzana.jpg" },
    { name: "pera", points: 1, img: "http://www.dummy.com/pera.jpg" },
    { name: "pera", points: 2, img: "http://www.dummy.com/pera.jpg" },
    { name: "pera", points: 3, img: "http://www.dummy.com/pera.jpg" },
    { name: "melon", points: 1, img: "http://www.dummy.com/melon.jpg" },
    { name: "melon", points: 2, img: "http://www.dummy.com/melon.jpg" },
    { name: "melon", points: 3, img: "http://www.dummy.com/melon.jpg" },
];

function random_card() {
    if (cards.length > 0) {
        const rand = Math.floor(Math.random() * cards.length);
        const card=cards[rand];
        const html = "card: " + card.name + "<br/>points: " +
            card.points + "<br/><br/>";
        const imgSrc = card.img;
        // ... hacer algo con la url, quizá añadir un <img> en el div?
        document.getElementById("myDiv").innerHTML += html;
        cards.splice(rand, 1);
    }
}

Usar el contructor de Array no es necesario, es más breve y claro usar directamente corchetes. Y me parece mucho más claro guardar un objeto con campos con nombres que un array para guardar difentes tipos de información

2
  • Hola Pablo! muchas gracias voy a incorporar tu respuesta! te dejé un mensaje en la pregunta que realicé de los botones y la función, por si no te ha llegado....gracias por todo!
    – Vero Soler
    Commented el 31 may. 2018 a las 12:09
  • Te he propuesto algo en esa pregunta Commented el 31 may. 2018 a las 13:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.