Question

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').toggle();
                $('#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!

Answer 1

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');
            }
        }