To-do-list Site issues

[lucas572]

Hi all! (again)

So I’m working on a to-do-list site in order to learn a bit of JavaScript and I’m a little stuck. If you head to [here](http://todo.lukeseager.com “to-do-today”) you can see the site as it stands. If you add some things to do you can see the checkboxes can be checked and unchecked, great!

But, try adding another to-do and all the checkboxes will uncheck!

Firstly, Is there a fix for this?

But, ideally, I wanted to use an icon font for the checkboxes, using the [checkbox hack](https://css-tricks.com/the-checkbox-hack/ “checkbox hack”), but that requires an ID to link to a label, which will only work for the first to-do. Not good.

Then I thought about doing it in JavaScript, putting a span or something in there, which almost worked, but it seems like you can’t use an onclick event when you’ve added code from JavaScript, because it’s not in the DOM on page load? Or so I read.

So I’m a little stuck for ideas as to how to get these statuses checked and un-checked without them resetting when someone adds a new thing to-do!

Any ideas/suggestions would be amazing.

[Josh]

I’m not sure if I can be of any help with your main issue here, but as to attaching event handlers to content injected via JavaScript, the jQuery .on() event handler attachment is what you want. Check out the jQuery documentation [here](http://api.jquery.com/on/) for more info on that.

Seems to me the old .live() method was easier to understand, but I’m a bit of a JS newbie, so meh.

For the checkbox icons, however, why not just use background images (or a sprite, actually) alternated based on the :checked selector, as Chris goes over [here](https://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/)?

Also, might I humbly suggest adding some more obvious indication that the to-do has been completed upon checking, like changing the urgency icon out, changing the row background color, or even collapsing that row or moving it down the list or into a “Completed” section that autopopulates?

Edited to add: Awesome concept you’ve got going on, by the way. I really love the look and feel of the web app so far.

[lucas572]

Thanks! Will take a look at the jQuery .on() handler :)

Yea, I did originally use a slightly different checkbox hack, but as I say they all require a label connected to the input with an ID, which will only work for the first to-do, because it’s an ID.

Thanks for the suggestions on the completed to-do’s, will definitely try something like that out! Thanks for the kind words :)

[Josh]

>Thanks! Will take a look at the jQuery .on() handler :)

No problem!

>Yea, I did originally use a slightly different checkbox hack, but as I say they all require a label connected to the input with an ID, which will only work for the first to-do, because it’s an ID.

I’m sorry if I’m not understanding this completely, but where are you finding a requirement for an ID on the input? If we’re just focusing on replacing the checkbox graphic here, it’s super simple to do, you don’t even need a class. It would look something like this (a very much simplified piece of code, but you get the idea):

input[type=checkbox] {
opacity: 0; /* Hide the original checkbox */
width: 20px;
}
input[type=checkbox] + label {
cursor: pointer; /* Make sure it looks clickable */
background: url(check.png) left center no-repeat; /* Supply your own custom graphic */
}
input[type=checkbox]:checked + label {
background: url(checked.png); /* Swap out the graphic if the checkbox is :checked */
}

I’ll look through your JS and see if I can locate where it’s clearing the checkboxes for you during my lunch break. I love this kind of thing . . . guess I’m a little OCD. :D

[lucas572]

The ID would be in the HTML on its own, to connect the Label to the checkbox you’re hiding.

So the HTML would be `Label text if needed` so that you can use the `+ label` bit of CSS. Or am I completely wrong?

[Josh]

Ah, I see what you’re thinking!

No, the + label simply acts as a sibling selector, so input[type=checkbox] + label will select all inputs that are checkboxes, as well as their immediate sibling labels.

This allows this method to work for most use cases, because it’s not ID or class-based.

For more information on advanced CSS selectors like this, [check out this article](http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/). It’s one of the most detailed I’ve seen.

[Josh]

Okay, near as I can figure, the checkbox clearing bug is tied to the variable “t” which sets window.todoTable.innerHTML (within your onClick function). When I remove the variable todoStatus from that string, and replace it with this string:

I get the opposite case–not only are all new to-dos already checked, as expected, but so are existing ones that were unchecked.

[lucas572]

Aaaaah, can’t believe I didn’t know about this sibling selector! Amazing.

Not sure if I’m missing something here, but the `input` you’ve quoted still uses an ID? When I use that code above within the **todoUserList** variable with the `window.todoTable.innerHTML` bit, I still get the same result of only being able to select one checkbox and them all resetting if you add something new.

[lucas572]

Ah okay, I think we’re on the same page now!

I have the same as you explained, with new items coming in checked.

If you add more than one item though, there is still the issue of all checkboxes controlling just one checkbox. Was this the case with your own test too?

This is due to this line (particularly the bold parts):
todoStatus = ““;

Which have to be there for the checkbox hack to work. I understand that there is no ID needed for the CSS of it, but for the actual functionality of the hack, I don’t think there’s a way around using an ID. Because of this, only the first checkbox added will work as expected. All subsequent boxes will just stay checked forever.

[lucas572]

Yep, I would have to agree with you jQuery would be the way to go! Sadly, this is for a University project and the brief demands JavaScript unfortunately.

But, I think I’m almost there now! The Incremental idea worked like a charm, now all the checkboxes are independent and can be checked/unchecked to your hearts content!

Still have this issue of them all resetting when a new item is added, kinda annoying really :/

[lucas572]

Side note: I probably will go through this again in jQuery after I finish uni, a chance to learn JS’s sister language I guess :)

[lucas572]

Hmm, it is strange, because there’s no page reloading, and the innerHTML only adds a new table row, and so shouldn’t effect the previous rows, but somehow does :S

I’ll have a dig through stack overflow in the morning, see if anyone’s came across a similar problem.

[lucas572]

NICE! Works perfectly! You f*cking genius!

[Author]

Posts