Question

$(document).ready(function() {  
    $("#light").hide();  
    $('.createmessage').click(function() {  
        $('#light').show();    
    });
    $('#fade').click(function() {
        $('#light').hide();
    });
    $('.cancelButton').click(function() {
        $('#light').hide();
    });
});

​
That is the jQuery I am working on and I’m pretty sure something is majorly wrong. 1 it does not seem to look right and two the codes not working.

the jsfiddle link here
http://jsfiddle.net/6aNL5/

If someone could explain what I am doing wrong, please by all means. I like to learn and this is just practice for me I suppose.

Answer 1

The jsfiddle is set to use Mootools, so that’s probably why nothing’s working on there. Besides that, I think the problem here is code sloppiness. You shouldn’t need to attach event listeners inline with your HTML. So for example, instead of:

<span class="createMessage" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">

Do this in JavaScript:

$(document).ready(function() {  
    $("#light").hide();  
    $('.createMessage').click(function() { // This was misspelt before
        $('#light').show(); 
        $('#fade').show();
    });
    $('#fade').click(function() {
        $('#light').hide();
    });
    $('.cancelButton').click(function() {
        $('#light').hide();
        $('#fade').hide();
    });
});   

.show() and .fade() simply toggle the display property anyways. And now, you’re separating your HTML structure from your interactive JavaScript which makes debugging way easier.