Changing value of a variable within an if statement in Javascript - Stack Overflow

admin管理员组

文章数量:1278819

I'm having a problem with a piece of code and it's driving me nuts. I've been stuck on this for hours, and the worst part is that I'm assuming it's really simple; I just can't figure it out.

I'm trying to make a simple event calendar using Javascript/jQuery. This is the simplified code that 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?

I'm having a problem with a piece of code and it's driving me nuts. I've been stuck on this for hours, and the worst part is that I'm assuming it's really simple; I just can't figure it out.

I'm trying to make a simple event calendar using Javascript/jQuery. This is the simplified code that 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?

• javascript
• variables

Share Improve this question Follow edited Mar 11, 2012 at 19:54 Jared Farrish 49.2k1717 gold badges9999 silver badges106106 bronze badges asked Mar 11, 2012 at 19:48 Ryan BrennerRyan Brenner 3511 gold badge11 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Your script code is only run once. You aren't changing the click handlers after you clicked them, so those handlers will always give the same results.

But instead of fixing that it would be simpler to use a single handler for each button and using arithmetic to calculate the next/previous month instead of having 12 handlers which you change at runtime.

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

you are using the .click() function wrong. You should make 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;
    }
});​

You can use a closure to store your reference 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/pCs2G/

本文标签： Changing value of a variable within an if statement in JavascriptStack Overflow