Clever Geek Handbook

Changing the value of a variable in an if statement in Javascript

I have a problem with a piece of code and it is driving me crazy. I've been stuck on this for hours and the worst part is that I assume it's very simple; I just can't figure it out.

I am trying to create a simple event calendar using Javascript / jQuery. This is the simplified code I have:

var currentMonth = 1;
if (currentMonth == 1) {
    $("#prev-month").click( function() {
        currentMonth = 12;
    });
    $("#next-month").click( function() {
        currentMonth = 2;
    });
}
if ( currentMonth == 2) {
    $("#prev-month").click( function() {
        currentMonth = 1;
    });
    $("#next-month").click( function() {
        currentMonth = 3;
    });
}
if ( currentMonth == 3) {
    $("#prev-month").click( function() {
        currentMonth = 2;
    });
    $("#next-month").click( function() {
        currentMonth = 4;
    });
}
if ( currentMonth == 4) {
    $("#prev-month").click( function() {
        currentMonth = 3;
    });
    $("#next-month").click( function() {
        currentMonth = 5;
    });
}

Now, every time I click the button with the ID "next month" it is always 2. If I click the button with the ID "prev-month" it is always 12. It never changes. What am I doing wrong?

+3


source to share


4 answers


The script code only runs once. You don't change your click handlers after clicking them, so these handlers will always give the same results.

But instead of fixing that, it would be easier to use one handler for each button and use arithmetic to calculate the next / previous month instead of the 12 handlers you change at runtime.



$("#prev-month").click( function() {
    currentMonth = (currentMonth - 1) || 12;
});
$("#next-month").click( function() {
    currentMonth = currentMonth % 12 + 1;
});
+6


source


you are using the function incorrectly .click()

. You should do it like this:



var currentMonth = 1;

$("#prev-month").click(function() {
    currentMonth--;
    if (currentMonth == 0) {
        currentMonth = 12;
    }
}
$("#next-month").click(function() {
    currentMonth++
    if (currentMonth == 13) {
        currentMonth = 1;
    }
});​
+3


source


You can use a closure to store the link and only one click handler (using $(this).is()

):

<div>
    Current Month: <input type="text" id="current-month"/>
    <button id="prev-month">Previous Month</button>
    <button id="next-month">Next Month</button>
</div>

$(document).ready(function(){
    var currentMonth = 1,
        $currentmonth = $('#current-month');

    $currentmonth.val(currentMonth);

    $("#prev-month, #next-month").click(function() {
        var $this = $(this);

        if ($this.is('#prev-month')) {
            currentMonth = currentMonth - 1;
        } else {
            currentMonth = currentMonth + 1;
        }

        if (currentMonth == 0) {
            currentMonth = 12;
        } else if (currentMonth > 12) {
            currentMonth = 1;
        }

        $currentmonth.val(currentMonth);

        console.log('Current Month: ' + currentMonth);
    });
});

http://jsfiddle.net/pCs2G/

0


source


if you do this, you will not pass. I'm a professional and you all suck. Never again will I show my face, but now you know that I am the best and will remain so forever.

-2


source






More articles:


All Articles