CODEWITHSUNDEEP
javascriptdeclarationvar
Rosamunda
Rosamunda

Reputation: 14990

JS: why is the var not declared when it is declared inside a method of an object and passed as a parameter to the other method of the same object?

I don't know why I get the error "ReferenceError i is not declared", when the variable is declared inside a method of an object and passed as a parameter to the other method of the same object.

This is my JS:

var reservasAPP = {   
    generarGrilla: function(){
        //la llamo desde el html con jQuery(document).ready();
        for(var i=1; i<13; i++){
            var impresionGrilla = $('#grilla').append("<button class=\"btn btn-primary btn-xs\" onclick=\"return reservasAPP.guardarReserva(i);\">Reservar</button>");
        };
    },
    nombre: function (i) {
        return $('#horario'+i).val();
    },  
    guardarReserva:function(i){
        var reservaConfirmada = $('#horario'+i).html('--> '+this.nombre());
        console.log("whatever "+i);
        console.log(i);
        return false;
    },    
}

window.reservas = reservasAPP;

If I go to the console and try to get the value of var i typing "var i", I get "undefined". Why is undefined?

Upvotes: 0

Views: 44

Answers (3)

Alnitak
Alnitak

Reputation: 339917

Replace your generarGrilla function with this:

generarGrilla: function() {
    for (var i = 1; i < 13; i++){
        $('#grilla').append('<button class="btn btn-primary btn-xs">')
                    .on('click', this.guardarReserva.bind(this, i));
    }
},

The code above replaces the inline DOM0 event handler with a jQuery-registered handler.

That handler is generated by the .bind call, that not only ensures that guardarReserva is called with the correct this, but also passes the current value of i is passed as the first parameter to that function.

[ Within guardaReserva() you also need to remember to pass i when you call this.nombre(), i.e. this.nombre(i) ].

Upvotes: 1

m-albert
m-albert

Reputation: 1100

Try this...

var reservasAPP = {   
    generarGrilla: function(){
        //la llamo desde el html con jQuery(document).ready();
        for(var i=1; i<13; i++){
            var impresionGrilla = $('#grilla').append("<button class=\"btn btn-primary btn-xs\" onclick=\"return reservasAPP.guardarReserva(" + i + ");\">Reservar</button>");
        };
    },
    nombre: function (i) {
        return $('#horario'+i).val();
    },  
    guardarReserva:function(i){
        var reservaConfirmada = $('#horario'+i).html('--> '+this.nombre(i));
        console.log("whatever "+i);
        console.log(i);
        return false;
    },    
}

Explanation "<button class=\"btn btn-primary btn-xs\" onclick=\"return reservasAPP.guardarReserva(i);\">Reservar</button>" is injected into the DOM but the variable "i" has no meaning there.

Also, the "nombre" function requires an argument which should apparently be the argument passed into the "guardarReserva" function. Therefore the following line has been changed:

var reservaConfirmada = $('#horario'+i).html('--> '+this.nombre());

to

var reservaConfirmada = $('#horario'+i).html('--> '+this.nombre(i));

Upvotes: 1

MikeChainSaw
MikeChainSaw

Reputation: 31

If that i variable you are trying to use here:

nombre: function (i)

guardarReserva:function(i)

It the same i declared here:

generarGrilla: function(){
//la llamo desde el html con jQuery(document).ready();
for(var i=1; i<13; i++){

That i it's only defined within the scope of the generarGrilla function that's why you get the "ReferenceError i is not declared" error.

Upvotes: 1

Related Questions