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
Electronic
Electronic3y ago
Just the numerators increment?
CDL
CDL3y ago
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
var count = 0;

function buttonPress(el) {
console.log(el);
el.innerHTML = "1/2";
}
var count = 0;

function buttonPress(el) {
console.log(el);
el.innerHTML = "1/2";
}
Coder_Carl
Coder_Carl3y ago
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
CDL
CDL3y ago
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!
Want results from more Discord servers?
Add your server