Trying to increment this button but struggling to find the right resource for onclick
https://codepen.io/Laing91/pen/rNKNaQb
I'm trying to create an onclick for the buttons, so when I press a button, it changes the 0/2 to 1/2 or 2/2, but I'm really not sure how to do this... I've attached my codepen above with my latest attempt but it's not working (obviously)
4 Replies
Just the numerators increment?
to give context, when you complete a task you click the button so it changes from 0/2 to 1/2, once it hits 2/2 it stops and goes from blue to green background-color. The issue I'm having is figuring out how to actually make it work lol. I've got as far as the below
here I have updated your code. Let me know if any of this doesnt makes sense.
https://codepen.io/CA-Carl/pen/bGKGVVX
I would recommend that you consider iterating over some JSON or some other dataset to create each of the columns and rows as your HTML was quite lengthy and probably took you a long time to write
I have inside of the
HTML
1 - moved all of the column styling into the colgroup of the table instead of giving each and every single td a class
2 - changed the heading element into a caption (styled with CSS) as this tells someone using assistive technology what the table is about
3 - Updated the name td into a th as it is a heading for the row and not just data
4 - added a data value to the element that keeps track of the values shown
CSS
- added font styling to the caption and .row-heading
JS
-grabbed the data-number
- split it
- compared
- updated both data-number and the innerhtml of the element
I have left the classList.add to you and this should be added inside of the comparison on line 8- 10
That is incredible. I’m just at work but when I’m home I’ll go through it and see exactly what you’ve done different, but dang, nice work!