Problems passing parameters, and getting code ready for MYSQL integration

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!

score 1 · Answer 1 · answered Jul 24 '12 at 05:41

1

Are you sure that when you say this:

$("#" + divId).attr("class", "incompleteTask");

You don't mean this?

$("#" + divId).addClass("incompleteTask");
$("#" + divId).removeClass("completeTask");

answered Jul 24 '12 at 05:41

sgress454

24,870
4
74
92

So `.attr()` won't change the value of an existing attribute? I changed all 4 instances to that because that looks like what I want to do, but `formatTask()` still stops in the same place – user1542645 Jul 24 '12 at 06:24
You're right, it does. It never occurs to me to change the "class" attribute of a tag rather than working on the "className" property of the DOM tag. In any case, see other answer for the real issue. – sgress454 Jul 24 '12 at 06:50

score 1 · Accepted Answer · edited May 23 '17 at 10:09

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!

edited May 23 '17 at 10:09

Community

1
1

answered Jul 24 '12 at 06:52

sgress454

24,870
4
74
92

Thank you! I didn't realize that "!" would be invalid in an id(haven't invested much time in css I guess). `formatTask()` works perfectly now. If there are any recommendations for cleaning up `taskToggle()` I'd love to hear them here, but my main issue it resolved – user1542645 Jul 24 '12 at 08:10

score 0 · Answer 3 · answered Jul 24 '12 at 04:49

seperate the taskToggle() from formatTask() and simply call taskToggle() in formatTask() like this

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

 taskToggle();

 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();
}


}

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");
    }
};

I tried that and it changes nothing - thanks though. If you made it work in the fiddle and I'm missing something, post the update link please — user1542645, Jul 24 '12 at 05:03

Problems passing parameters, and getting code ready for MYSQL integration

3 Answers3