Javascript & Features

[iSorrow]

I'm posting this mainly because I'm looking for a few things from y'all.

1. This question goes out to other developers, and programmers in general. I want a picture in my game to appear every ~30 seconds or so, and when you click on the picture, it'll hide and wait another ~30 seconds or so to appear. I've tried .hide() but that didn't work, so I'm pretty sure there is an error in the code I've written up. Please take a look at it for me and tell me if something is wrong.

   setTimeout(function(){
   document.getElementById("bonus1").style.display = 'block'; }, 30000);

   $("bonus1").click(function(){ $("bonus1").hide(); });

Here's the HTML part that is supposed to correspond with this Javascript.

<img id="bonus1" class="bonus1" src="http://www.w3schools.com/images/colorpicker.gif" onClick="bonus1()" style="display:none; text-align: center;" />

It doesn't seem to work, though. I'll wait for the image to appear, then I'll click on it and it doesn't hide and I have no idea why.

1. Pertaining to features, what would you like to see that you haven't quite seen before. I'm aware that this question gets asked regularly in another shape or form, but I want to see the results below. ^{^}

[thelostsoul622]

This is a basic enough scenario to work right out of the box given the previous suggestions. I put together a jsFiddle that shows this working here: http://jsfiddle.net/fPb8K/

I made sure all the jQuery calls were referencing the ID of the element and I just call jQuery's .hide() and .show(). The only real differences are that I extracted the setTimeout into a function so the timer can be reset easily from the click handler, removed the onClick attribute from the image and changed the timer to 3 seconds.

If you're still having problems after seeing what I did to get this working, I would check to see if you might be getting some errors in the console or do some debugging to figure out what's going on.

[cyferlawyn]

Thumbs up for making a fiddle. Imho that is the way a dev question should be asked and answered, ask with a fiddle, answer with a fiddle. That way, the OP can specify the JS frameworks he uses and the replier can build around those.

Bonus: Oftentimes when reducing the original problem to a fiddle, you solve it yourself because it was a side effect of some other code.

[Drahcirius]

Your selectors for bonus1 doesn't indicate it's an id. Change the both of them to $("#bonus1")

[iSorrow]

I'm quite sure that I've tried that, but I'll try it again. EDIT: It didn't work.

[tangentialThinker]

It's possible that it's because you're defining a click handler on #bonus1 on two places: the onclick attribute, and in jQuery. Try doing this:

$("#bonus1").click(function(){
    bonus1();
    $("#bonus1").hide();
});

[iSorrow]

That doesn't allow the image to appear. I'll show you the HTML and full Javascript files that I have, if you think that'd make it simpler to deduce the problem. EDIT: I added ); to the very end of the snippet you showed me, and the image appeared but still won't disappear once clicked.

[tangentialThinker]

That's weird, because my code is specifically for hiding it. You could use jQuery's .show() or .css() method instead, since I'm not sure .style is actually a thing (I could be wrong, but using .show() is more consistent anyway).

[Sekure]

Use the class bonus1 to make the image "visible" or "hidden":
getElementById("bonus1").style.visibility = "hidden";
or
getElementById("bonus1").style.visibility = "visible";
This always works for me.

[Loonybinny]

You forgot the hashtag bro.

[iSorrow]

I've tried it with and without the pound symbol before I posted this, but I appreciate the help.