Kevin Powell - Community•3y ago

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•3y ago

Just the numerators increment?

CDLOP•3y 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•3y 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

Carl Davidson

CodePen

charresource

...

CDLOP•3y 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!

Gaming

Programming

Trying to increment this button but struggling to find the right resource for onclick