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);
}
}