How do I access the variable from one function to another

Question

I have an image manager with descriptions where I can modify the texts of the image and the image file.

The idea is to be able to save the modifications that I make in my database, but the way that I have found is to save only if I modify the image. If I do not modify the image, I can not save modifications of the texts.

It occurred to me to be able to access the imagePopup variable within the click function and be able to solve the problem, but I do not know if that is possible.

Maybe you know a better way to do this and I'm not seeing it.

I appreciate the help!

I give you the JQUERY code:

/*=============================================
UPLOAD IMAGE
=============================================*/

$("#subirPopup").change(function(){

    var imagenPopup = this.files[0];

    /*=============================================
    VALIDATE JPG O PNG
    =============================================*/

    if(imagenPopup["type"] != "image/jpeg" && imagenPopup["type"] != "image/png"){

        $("#subirLogo").val("");

        swal({
              title: "Error al subir la imagen",
              text: "¡La imagen debe estar en formato JPG o PNG!",
              type: "error",
              confirmButtonText: "¡Cerrar!"
            });

    /*=============================================
    VALIDATE SIZE IMAGE
    =============================================*/

    }else if(imagenPopup["size"] > 2000000){

        $("#subirLogo").val("");

         swal({
              title: "Error al subir la imagen",
              text: "¡La imagen no debe pesar más de 2MB!",
              type: "error",
              confirmButtonText: "¡Cerrar!"
            });

    /*=============================================
    PREVISUALIZATION 
    =============================================*/

    }else{

        var datosImagen = new FileReader;
        datosImagen.readAsDataURL(imagenPopup);

        $(datosImagen).on("load", function(event){

            var rutaImagen = event.target.result;

            $(".previsualizarPopup").attr("src", rutaImagen);

        })

    }

    /*=============================================
    SAVE CHANGES
    =============================================*/

    $("#guardarPopup").click(function(){

        var tituloPopup = $("#tituloPopup").val();

        var textoBotonPopup = $("#textoBotonPopup").val();

        var rutaBotonPopup = $("#rutaBotonPopup").val();    

        var datos = new FormData();
        datos.append("tituloPopup", tituloPopup);
        datos.append("textoBotonPopup", textoBotonPopup);
        datos.append("rutaBotonPopup", rutaBotonPopup);
        datos.append("imagenPopup", imagenPopup);

        $.ajax({

            url:"ajax/popup.ajax.php",
            method: "POST",
            data: datos,
            cache: false,
            contentType: false,
            processData: false,
            success: function(respuesta){

                if(respuesta == "ok"){

                    console.log(respuesta);

                    swal({
                      title: "Cambios guardados",
                      text: "¡La plantilla ha sido actualizada correctamente!",
                      type: "success",
                      confirmButtonText: "¡Cerrar!"
                    });

                }


            }

        })


    })

})

Answer 1

Try declaring imagenpopup outside the change function...

var imagenPopup='';
$("#subirPopup").change(function(){
imagenPopup = this.files[0];

/*=============================================
VALIDATE JPG O PNG
=============================================*/

if(imagenPopup["type"] != "image/jpeg" && imagenPopup["type"] != "image/png"){

    $("#subirLogo").val("");

    swal({
          title: "Error al subir la imagen",
          text: "¡La imagen debe estar en formato JPG o PNG!",
          type: "error",
          confirmButtonText: "¡Cerrar!"
        });

/*=============================================
VALIDATE SIZE IMAGE
=============================================*/

}else if(imagenPopup["size"] > 2000000){

    $("#subirLogo").val("");

     swal({
          title: "Error al subir la imagen",
          text: "¡La imagen no debe pesar más de 2MB!",
          type: "error",
          confirmButtonText: "¡Cerrar!"
        });

/*=============================================
PREVISUALIZATION 
=============================================*/

}else{

    var datosImagen = new FileReader;
    datosImagen.readAsDataURL(imagenPopup);

    $(datosImagen).on("load", function(event){

        var rutaImagen = event.target.result;

        $(".previsualizarPopup").attr("src", rutaImagen);

    })

}

/*=============================================
SAVE CHANGES
=============================================*/

$("#guardarPopup").click(function(){

    var tituloPopup = $("#tituloPopup").val();

    var textoBotonPopup = $("#textoBotonPopup").val();

    var rutaBotonPopup = $("#rutaBotonPopup").val();    
    if(imagenPopup == ''){
    var datos = new FormData();
    datos.append("tituloPopup", tituloPopup);
    datos.append("textoBotonPopup", textoBotonPopup);
    datos.append("rutaBotonPopup", rutaBotonPopup);
    datos.append("imagenPopup", imagenPopup);

    $.ajax({

        url:"ajax/popup.ajax.php",
        method: "POST",
        data: datos,
        cache: false,
        contentType: false,
        processData: false,
        success: function(respuesta){

            if(respuesta == "ok"){

                console.log(respuesta);

                swal({
                  title: "Cambios guardados",
                  text: "¡La plantilla ha sido actualizada correctamente!",
                  type: "success",
                  confirmButtonText: "¡Cerrar!"
                });

            }


        }

    })


}) } else { 
swal({
      title: "Error al subir la imagen",
      text: "Some Error",
      type: "error",
      confirmButtonText: "¡Cerrar!"
    });
}})

Answer 2

Declare the variable on top of every function

var imagenPopup='';

$("#subirPopup").change(function(){
   //.. add more code
});

$("#guardarPopup").click(function(){
   //.. add more code
});