JQuery .attr problem. $('#id').attr('value'); returns Undefined

I had this working, and somewhere along the lines I messed something up. Since then I've made several changes trying to get the problem fixed, and now I'm just stuck. As of now I have this:

            var calBtn = $('#calButton').attr('value');
        function disappearingTable() {
            if (calBtn = 'Turn Calendar Off') 
            {
                $('.calendarLayer').tog开发者_C百科gle();
                $('#calButton').attr('value', 'Turn Calendar On');
            }
            else if (calBtn = 'Turn Calendar On') 
            {
                $('.calendarLayer').toggle();
                $('#calButton').attr('value', 'Turn Calendar Off');
            }
        }

That's in script tags in the header. Then in the body I have this.

<form id="calendarForm" action="javascript:void(0);">
                <input type="submit" id="calButton" value="Turn Calendar Off" onclick="disappearingTable()" />
            </form>

I can't figure it out for the life of me. Even when I tried regular Javascript, I still get undefined. Anyone help? Thanks!

= is the assignment operator, you should be using === or == for equality:

if (calBtn == 'Turn Calendar Off') 
{
    $('.calendarLayer').toggle();
    $('#calButton').attr('value', 'Turn Calendar On');
}
else if (calBtn == 'Turn Calendar On') 
{
    $('.calendarLayer').toggle();
    $('#calButton').attr('value', 'Turn Calendar Off');
}

Firstly as said by no.good.at.coding = is assignment operator and is incorrect even if it works. == or === is used to test equality

Besides this, if I am not missing anything, the value of variable calBtn is set only once outside the function. Whenever the function is invoked in order to get a different value of calBtn it needs to be changed in the function or taken from the dom element everytime the function is called .

try this..

function disappearingTable() {
            var calBtn = $('#calButton').attr('value');
            if (calBtn ==='Turn Calendar Off') 
            {
                $('.calendarLayer').toggle();
                $('#calButton').attr('value', 'Turn Calendar On');
            }
            else if (calBtn === 'Turn Calendar On') 
            {
                $('.calendarLayer').toggle();
                $('#calButton').attr('value', 'Turn Calendar Off');
            }
        }

In addition to the equality checks, which still do need to be changed, I think you have a problem related to implied globals because your calButton variable lives outside of your function.

What if you refactored your code like so:

$('#calButton').click(function(e) {
    var element = $(this);
    var value = element.val();
    var layer = $('.calendarLayer');

    if (value === 'Turn Calendar Off') {
        layer.toggle();
        element.attr('value', 'Turn Calendar On');
    } else if (value === 'Turn Calendar On') {
        layer.toggle();
        element.attr('value', 'Turn Calendar Off');
    }
});

<form id="calendarForm">
    <input type="submit" id="calButton" value="Turn Calendar Off" />
</form>