CODEWITHSUNDEEP
javascriptjquery
Nicholas Ayoub
Nicholas Ayoub

Reputation: 89

A .Click function not working in jQuery

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

Upvotes: 1

Views: 80

Answers (4)

Diego Rodriguez
Diego Rodriguez

Reputation: 120

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

Upvotes: 1

Valdrinium
Valdrinium

Reputation: 1416

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

Upvotes: 1

Robbert
Robbert

Reputation: 6582

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


});

Upvotes: 1

rfornal
rfornal

Reputation: 5122

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).

Upvotes: 6

Related Questions