Question

I have this code for a small jQuery game I’m making, and all the pictures (characters) are hidden by default. There’s a question that says “Are you ready to play?” and a yes or no button. When you click the yes button, it hides the buttons and the text. It is also supposed to display the first image, which is #main. For some reason, it’s not working.
Here’s the jQuery code with the images under:

$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);  
var main=$('#main');  
 batman=$('#batman');  
 car=$('#car');
 hobo=$('#hobo');
 cop=$('#cop');
 knife=$('#knife');
 gangfight=$('#gangfight');
 ganggun=$('#ganggun');
 gangknife=$('#gangknife');
 blood=$('#blood');
    document.write('<title>LOAUP</title>');
    document.write('<center><h1>The life of an unlucky person</h1></center>');
    document.write('<center id="start">Are you ready to play?</center>');
    document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
    $('#yes').click(function(){
        $('#yes,#no').hide(function(){
            $('#start').hide();
            $('#main').show
        });
        });
    $('#no').click(function(){
        $('#yes,#no').hide();
        $('#start').hide();
        document.write('<center>Ok, come back another time then.</center>');
    });
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
    <img id='batman' src='/jquery/sprites/spriteBatman.png' />
    <img id='car' src='/jquery/sprites/spriteCar.png' />
    <img id='hobo' src='/jquery/sprites/spriteHobo.png' />
    <img id='cop' src='/jquery/sprites/spriteCop.png' />
    <img id='knife' src='/jquery/sprites/spriteKnife.png' />
    <img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
    <img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
    <img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
    <img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />

Edit:

Here’s the example:
http://jsbin.com/ocowas/1

Answer 1

In your #main click function change

$('#main').show

to

$('#main').show();

Your variable list should be comma seperated not colon seperated. and you may also want to rename your variables to make them more obvious and easier to read/remember by prefixing with a $ sign. For example when you store a selector as a variable use

var $element = $('#element'),
    $element2 = $('#element2'),
    $element23 = $('#element23');

Further, the hide() function does not take negative numbers as you have used. Just use hide() for an instant hide, or hide(100) for fast, hide(2000) for slow.. check: http://docs.jquery.com/Effects/hide

To append html to your document without using document.write, you can store the html as a variable, then select the body tag, or any other tag and append/prepend or replace the html to that, for example.

$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);

The ‘title’ tag should only appear between the ‘head’ tags of your html document. Use a heading tag instead, ‘h1’ to ‘h6’.
The html ‘center’ tag is also deprecated as far as I know. Try using ‘span’, ‘p’ or even ‘div’ instead.