3

Saludos, estoy creando un botón que muestre una carta aleatoria en Javascript, pero quiero saber cómo puedo reemplazar una carta nueva por la que tenía anteriormente en el div de salida ya que al activar el botón, se crea la nueva debajo de la anterior. Adjunto código y agradezco de antemano las respuestas.

<button onclick="sacar();">Sacar carta</button>
<div id="cartaOutput">
Aquí va la imagen de la carta

</div>
<input type="hidden" id="cartaHidden"/> <!--En este input va un valor que es con el que mando llamar a la carta-->

Ahora va el Javascript

function sacar()
{

document.getElementById("cartaHidden").value = Math.floor((Math.random()*42)+1); //Genero el número aleatorio
var carta=document.getElementById("cartaHidden").value; //Esto me permite pasar el valor del número random a una variable

var cartaOutput=document.getElementById("cartaOutput"); 
var salida=document.createElement("IMG"); 
    salida.setAttribute("src", ""+carta+".png");
cartaOutput.appendChild(salida); //Aquí muestro la imagen

}

1 respuesta 1

2

Intenta agregando un elemento img por defecto para luego modificarle el atributo src.

En html, le indicamos la imagen por defecto:

<button onclick="sacar();">Sacar carta</button>
<div id="cartaOutput">
  <img style="display:none" id="imagen-carta" /> <!--elemento donde se cargaran las imagenes-->
</div>
<input type="hidden" id="cartaHidden"/>

Le asignamos el display:none debido que no hay imagen inicial cuando carga la etiqueta y no queremos que muestre un error.

Ahora en el js, en vez de crear, buscamos el elemento imagen-cargar y le asignamos el atributo src y le indicamos que muestre la imagen ya cargada:

function sacar()
    {

    document.getElementById("cartaHidden").value = Math.floor((Math.random()*42)+1); //Genero el número aleatorio
    var carta=document.getElementById("cartaHidden").value; //Esto me permite pasar el valor del número random a una variable

    var cartaOutput=document.getElementById("cartaOutput"); 
    var salida=document.getElementById("imagen-carta"); 
    salida.setAttribute("src", ""+carta+".png"); // en vez de crear, le asignamos el attr src a la imagen ya existente.
     salida.style.display = "block";

    }

Ejemplo funcionado:

var cartas = [
'',
"https://i.sstatic.net/UgOXu.png?s=48&g=1",
"https://i.sstatic.net/tKsDb.png",
"https://i.sstatic.net/5d55j.png"
]
function sacar()
    {

    document.getElementById("cartaHidden").value = Math.floor((Math.random()*3)+1); //Genero el número aleatorio
    var carta=document.getElementById("cartaHidden").value; //Esto me permite pasar el valor del número random a una variable

    var cartaOutput=document.getElementById("cartaOutput"); 
    var salida=document.getElementById("imagen-carta"); 
    salida.setAttribute("src", ""+cartas[carta]+".png"); // en vez de crear, le asignamos el attr src a la imagen ya existente.
     salida.style.display = "block";

    }
<button onclick="sacar();">Sacar carta</button>
<div id="cartaOutput">
  <img style="display:none" id="imagen-carta" /> <!--elemento donde se cargaran las imagenes-->
</div>
<input type="hidden" id="cartaHidden"/>

4
  • Ese tag ¿funciona con el nombre de carta dinámico? Porque yo mando llamar a la carta con la variable carta concatenada a su extensión png en el Javascript Commented el 7 sept. 2017 a las 18:41
  • Si. Mira la respuesta actualizada.
    – Einer
    Commented el 7 sept. 2017 a las 18:47
  • Ya lo pruebo, gracias de antemano y voto positivo. Commented el 7 sept. 2017 a las 18:49
  • Funcionó perfecto, marcada como respuesta correcta. ¡Gracias! Commented el 7 sept. 2017 a las 18:55

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.