Question

I’ve been working on a project for 4 days now, completely written by hand, to see where I’m at with javascript (I’ve been going through the codecademy courses). I’m trying to create a browser based checklist program. So far I’ve written a clean menu interface that can dynamically create <div>s.

Here’s what I’ve got on jsfiddle:
http://jsfiddle.net/SdCaf/1/

My questions:

• Can I write the taskToggle() function more efficiently? Is there a jquery way to simplify it?

• If you have the time to examine my code in the Fiddle; will it take to mysql easily, or have I created some goofy redundant kludges, that will make it difficult to update?

• FIXED Why won’t my formatTask() constructor add the check boxes and descriptions (as seen in it’s if/else) – is there something wrong with my taskToggle() function, is it the checkbox <div> I’m trying to add, both, or something else?

The formatTask() constructor:

function formatTask(target, divId, content, description, complete) {

    function taskToggle() {
        if ($(this).hasClass("completeTask")) {
            $("#" + divId).attr("class", "incompleteTask");
            $("#" + divId + "Box").attr("class", "incompleteBox");
        }
        else if ($(this).hasClass("incompleteTask")) {
            $("#" + divId).attr("class", "completeTask");
            $("#" + divId + "Box").attr("class", "completeBox");
        }
    };

    if (complete) {
        var div = new formatDiv(target, divId, "completeTask", content, taskToggle, description);
        formatDiv(divId, divId + "Box", "completeBox", "O");
        div.addDescription();
    }
    else {
        var div = new formatDiv(target, divId, "incompleteTask", content, taskToggle, description);
        formatDiv(divId, divId + "Box", "incompleteBox", "[ ]");
        div.addDescription();
    }
}

When I call it, it seems to accept all of it’s parameters and I get no errors in the console, but it doesn’t seem to run formatDiv(divId, divId + "box", "completeBox", "O"); and div.addDescription. You can see this for yourself if you click on “»Show Lists” in the result pane of the Fiddle (and you’ll get an example of how the .addDescription() function should work)

Any other feedback you may wish to provide would be greatly appreciated. I need to know if I’m on the right track, or if I’m starting to write junky code that will become inelegant.
Thank you for your time if you give it!

Answer 1

The issue here is that the DOM ID that you’re assigning for your task is “atask!” which isn’t valid (because of the !) character. Make sure you remove invalid characters from your IDs and class names!