A .Click function not working in jQuery

Question

What I need:

I need the button2 to appear when button1 is clicked. NEW STUFF: What I need it to do is save button2 there so if you refresh or "run" button 2 is already there how would I do that?

What I've done/Tried:

I've tried a bunch of different things such as changing it around changing the scope, as well as checking for console errors, I get none so I'm not too sure what is going on.

CODE

$(document).ready(function () {
  $('#button2').hide();
  window.highestLevel = 1;

$('#button1').click(function () {
    Check();
    highestLevel = 2;
});

  if (highestLevel == 2) {
    $('#button2').show();
}

function Check() {
    localStorage.setItem('highestLevel', highestLevel);
  }

});

WHAT WORKS

The only thing that works is it stores it correctly to the html local storage when I click $('#button1') .

Link , jsFiddle

Answer 1

For this to work as you describe, the if-structure ...

if (highestLevel == 2) {
    $('#button2').show();
}

... must be inside the click function. Try ...

$('#button1').click(function () {
    Check();
    highestLevel = 2;
    $('#button2').show();
});

You really don't need the if-structure doing it this way ... in your code, the if-structure only runs on document-ready (ONE TIME).

Answer 2

You are mistaken about what is happening. This code block runs when the document is loaded, not after button1 is clicked.

You want to put it inside the click function

$('#button1').click(function () {
  Check();
  highestLevel = 2;

  if (highestLevel == 2) {
    $('#button2').show();
  }
})

You will also want to prevent the default action of the button, which is to post the page causing it to reload, by adding an event object

$('#button1').click(function (e) {
  e.preventDefault();
  Check();
  highestLevel = 2;

  if (highestLevel == 2) {
    $('#button2').show();
  }
})


});

Answer 3

You don't need all of that... The problem is that

if (highestLevel == 2) {
    $('#button2').show();
}

executes only once, when the document is ready.

Try this:

$(document).ready(function () {
  $('#button2').hide();

  $('#button1').click(function () {
     $('#button2').show();
  });
});

Answer 4

Try with this

        window.highestLevel = localStorage.getItem('highestLevel');
        $(document).ready(function () {
            if (highestLevel == 2) {
                $('#button2').show();
                $('#button1').hide();
            }
            else {
                highestLevel == 1
                $('#button1').show();
                $('#button2').hide();
            }

            $('div').click(function () {
                if (highestLevel == 2) {
                     highestLevel = 1;
                    $('#button1').show();
                    $('#button2').hide();
                }
                else{
                    highestLevel = 2;
                    $('#button2').show();
                    $('#button1').hide();
                }
                Check();
            });
        });


        function Check() {
            localStorage.setItem('highestLevel', highestLevel);
        }