CODEWITHSUNDEEP
jquery
Reinis
Reinis

Reputation: 136

jquery functions arent called on click

    $(document).ready(function () {
      $('.poga').css('cursor','pointer');

      $("#poga1").click(function() {
      var n= "poga1";
        alert ("pēc piereģistrē " + n);
      });
      $("#poga2").click(function() {

        var n= "poga2";  
        alert ("pēc piereģistrē " + n);
      });

      $(".poga").click(function(){
         $(".poga").animate({borderBottomWidth:'1'});
         $(this).animate({borderBottomWidth:'0'});
         alert ("n ir vienāds ar " + n);
         switch(n)
    {
    case poga1:
      $("#ChangeContent").html("Pirmā poga nospiesta.");
      break;
    case poga2:
     $("#ChangeContent").html("Otrā poga nospiesta.");
      break;
    default:
      $("#ChangeContent").html("Trešā vai ceturtā poga nospiesta.");
    }

     return false;
});

});

So, i've got this javascript function that is supposed to dynamically change the text after pressing a button. "poga" means button in my language. Since i'm a beginner in jquery, i'm trying to keep it simple. 

  $("#poga1").click(function() {
  var n= "poga1";
    alert ("pēc piereģistrē " + n);
  });
  $("#poga2").click(function() {

    var n= "poga2";  
    alert ("pēc piereģistrē " + n);
  });

When button 1 is clicked, make n equal "poga1", when button 2 is clicked, make n equal "poga2"

  $(".poga").click(function(){
     $(".poga").animate({borderBottomWidth:'1'});
     $(this).animate({borderBottomWidth:'0'});
     alert ("n ir vienāds ar " + n);
     switch(n)
{
case poga1:
  $("#ChangeContent").html("Pirmā poga nospiesta.");
  break;
case poga2:
 $("#ChangeContent").html("Otrā poga nospiesta.");
  break;
default:
  $("#ChangeContent").html("Trešā vai ceturtā poga nospiesta.");
}

When any of the buttons are clicked (all of the buttons have this class), animate a little bit and change the content of the div that's named "ChangeContent".

For some reason, i don't even get the alert in the last function, although before i added the first two functions that register n, the last function was working.

My question is why the last function that is supposed to work when i click a specific class doesn't work?

Upvotes: 0

Views: 67

Answers (2)

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

In your case statement, you're testing against the values of variables named poga1 and poga2 instead of the string values. Add quotes around the values so you will have

switch(n)
{
case 'poga1':
  $("#ChangeContent").html("Pirmā poga nospiesta.");
  break;
case 'poga2':
 $("#ChangeContent").html("Otrā poga nospiesta.");
  break;
default:
  $("#ChangeContent").html("Trešā vai ceturtā poga nospiesta.");
}

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

The problem you are facing is to do with variable scope. You are declaring n inside the click functions, so it does not exist outside them. Look at this code...

var n;

$(document).ready(function () {
    $('.poga').css('cursor','pointer');

    $("#poga1").click(function() {
        n = "poga1";
        alert ("pec pieregistre " + n);
    });

    $("#poga2").click(function() {
        n = "poga2";  
        alert ("pec pieregistre " + n);
    });

    $(".poga").click(function(){
        $(".poga").animate({borderBottomWidth:'1'});
        $(this).animate({borderBottomWidth:'0'});
        alert ("n ir vienads ar " + n);
        switch(n)
        {
            case "poga1":
                $("#ChangeContent").html("Pirma poga nospiesta.");
                break;
            case "poga2":
                $("#ChangeContent").html("Otra poga nospiesta.");
                break;
            default:
                $("#ChangeContent").html("Treša vai ceturta poga nospiesta.");
        }
        return false;
    });
});

In that, n is declared outside the click functions, so you can assign values to it and it will persist in other functions.

Edit:

I've updated your jsfiddle example here...

http://jsfiddle.net/j6ULQ/2/

Upvotes: 3

Related Questions