CODEWITHSUNDEEP
javascriptjquery
wizviper
wizviper

Reputation: 19

Jquery .show() not working in function

I am making a cookie-clicker style game and want to make an icon appear once a cursor is bought. The code seems like it should work, but upon testing the icon doesn't show. Here is the JSFiddle: https://jsfiddle.net/wizviper/mq0qwnvr/

Here is the main code:

document.getElementById("cursorShop").onclick = function() {
if (cookies >= cursorPrice) {
  cookies = cookies - cursorPrice;
  cursorPrice = cursorPrice * 1.15;
  cps = cps + 0.1;
  updateValue();
  cursorAmount = cursorAmount + 1;
  if (reinforcedFingerActive == 0) {
    $("#reinforcedFingerShop").show("fast", function() {


    });
  }
}

}

EDIT: Thanks everyone for all the help! Your answers were great!

Upvotes: 0

Views: 40

Answers (3)

Z-Bone
Z-Bone

Reputation: 1584

You need to change visibility:hidden to display:none on <img id="reinforcedFingerShop">

Here see it in action: https://jsfiddle.net/h3wmw085/3/

Upvotes: 1

Vic Wolk
Vic Wolk

Reputation: 166

All you need to do is replace the code to:

  if (reinforcedFingerActive == 0) {
    $("#reinforcedFingerShop").css("visibility", "visible");
  }

This is because you're not setting the element with "display: none;", but rather putting it's visibility to hidden instead. I've checked your fiddle and it works!

Just remember to let go of that other code bit inside that if.

Upvotes: 0

Sean Kwon
Sean Kwon

Reputation: 907

Your image is using has the css attribute "visibility" set to "hidden". .show only works with display.

You want to, instead, set the visibility to visible:

$("#reinforcedFingerShop").css("visibility", 'visible');

Here's an updated fiddle to demonstrate https://jsfiddle.net/mq0qwnvr/41/

Upvotes: 2

Related Questions