1

vengo aquí porque no he podido encontrar una solución completa para mi problema.

El caso es que quiero que el usuario ingrese un código y este cargue una imagen en base al código ingeresado. En caso acá son cupones. Si ingresa el cupon1, que cargue la imagen1. Si ingresa el cupon2, que cargue la imagen 2 y así hasta un número mayor. El caso es que no logro que la variable del número ingresado por el usuario, sea cargada fuera de una función. Quizá lo estoy viendo desde una perspectiva muy novata. Acá les dejo el código HTML y JS.

La imagen fondo.png es la imagen por defecto

Código HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cargar Imagen</title>
  </head>
  <body>
    <p>Ingrese número de código
      <input type="text" maxlength="5" id="n_codigo" />
      <input type="button" value="Canjear" id="canje"/>
    <h1>"Intenta cargar una imagen"</h1>
    <canvas id="fondo" width="500" height="500"></canvas>
    <script src="cargar.js" charset="utf-8"></script>
  </body>
</html

JavarScript.

var c = document.getElementById("fondo");
var papel = c.getContext("2d");
var fondo = {
  url: "tile.png",
  cargaOK: false,
}

var imagen1 =
{
  url: "imagen1.png",
  cargaOK: false,
}

var imagen2 =
{
  url: "imagen2.png",
  cargaOK: false,
}



fondo.imagen= new Image();
fondo.imagen.src= fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

imagen1.imagen= new Image();
imagen1.imagen.src= imagen1.url;
imagen1.imagen.addEventListener("load", cargarImagen1);

imagen2.imagen= new Image();
imagen2.imagen.src= imagen2.url;
imagen2.imagen.addEventListener("load", cargarImagen2);

function cargarImagen1(){
  imagen1.cargaOK = true;
}
function cargarImagen2(){
  imagen2.cargaOK = true;
}

//Funciones y variables Código
var codigo = document.getElementById("n_codigo");
var boton = document.getElementById("canje");
boton.addEventListener("click", cargarCupon);

function cargarCupon()
{
  let xxx = parseInt(codigo.value);
  let cupon = xxx;
  console.log(cupon); //valor que entrega el usuario
  }



//Funciones y variables de carga de Imagen
fondo.imagen = new Image();
fondo.imagen.src = fondo.url;
fondo.imagen.addEventListener("load", cargarFondo);

function cargarFondo(){

  fondo.cargaOK = true;
  dibujar();
}

function dibujar()
{
  if(fondo.cargaOK == true)
  {
    papel.drawImage(fondo.imagen,0,0);
  }
}

1 respuesta 1

1

el HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Cargar Imagen</title>
  </head>
  <body>
    <!-- Usa el tag img en vez de usar canvas, es mas sencillo, deja en src la imagen por defecto-->
    <img id="fondo" src="fondo.png"/>
    
    <!-- Usa el tag label para describir un input -->
    <label for="codigo">Ingresa tu código</label> 
    <input id="codigo" type="text" value="" placeholder="Ingresa el código aquí"/>

    <!-- si es para llamar una funcion es mejor usar button -->
    <button onClick="cargarImagen()">Canjear</button>
    <script src="cargar.js" charset="utf-8"></script>
  </body>
</html>

ahora el JS

//hacer una lista de la imágenes y mapeas el código a la imagen correspondiente
var imagenes = [
  {codigo:"codigo1", src:"imagen1.png"},
  {codigo:"codigo2", src:"imagen2.png"},
  {codigo:"codigo3", src:"imagen3.png"},
  ...
]

var espacioParaImagen = document.getElementById("fondo");

function cargarImagen() {
  // tomas el valor del campo código al momento de dar click al botón
  var codigo = document.getElementById("codigo").value;

  // buscas en la lista de imagenes el primer elemento que tenga ese código
  var imagen = imagenes.find( (elemento) => elemento.codigo)

  //cambias la ruta de la imagen, si no encuentras el código en la lista dejas la imagen por defecto
  espacioParaImagen.src = (imagen!==null? imagen.src : "fondo.png") 
}

Lo escribí sin correrlo, pero te puedes dar una idea

2
  • te estaria faltando una explicacion de porque a el no le funciona. el 29 dic. 2020 a las 12:24
  • Hola. Muchas gracias por tus anotaciones pero, ¿por qué el mío no funciona? Si me pudieras ayudar a entender eso, te lo agradecería bastante. el 30 dic. 2020 a las 17:38

Tu Respuesta

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

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