Need help understanding something (.insertRow/Cell)(no jquery)

#1

I am in on a course on Udacity and we have to make a project, which is easy to do but I’ve been practicing on it with different stuff and trying to do it both in jquery and without.
Now I stuck at a point not really understanding this part. Whether this is even a possible way to finish what I started or did I just had to abandon this and do it other way.
Take a look please! convo on forums: https://imgur.com/a/AFW2z
https://codepen.io/adkuca/pen/JMJEBZ/
then I tried this and found it counts weird, is this even doable?

function cellColorCheck() {
    var x = 0;
    for (let i = 0; i < pCanvas.getElementsByTagName('td').length; i++) {

        if (pCanvas.getElementsByTagName('td')[i].style.backgroundColor != "") {
            x++;

            //console.log(pCanvas.getElementsByTagName('td')[i].style.backgroundColor)
        }
        console.log(x);
        /*while (pCanvas.getElementsByTagName('td')[i].style.backgroundColor == "") {
            btn1.disabled = true;
        }*/
        //console.log(pCanvas.getElementsByTagName('td')[i].style.backgroundColor);
    }
}
function cellClickAddColor (cell) {
    cell.addEventListener('mousedown', function(evt) {
        if (evt.button == 0) {
            this.style.backgroundColor = colorPicker.value;
            //console.log(this.style.backgroundColor); //broji po jedan
            /*btn1.disabled = false;*/
        } else if (evt.button = 2) {
            this.style.backgroundColor = "";
        }
        cellColorCheck()
        //console.log(pCanvas.getElementsByTagName('td')[23].style.backgroundColor);
    })
}
function makeGrid() {
    for (let i = 0; i < pHeight.value; i++) {
        const row = pCanvas.insertRow(i);
        for (let j = 0; j < pWidth.value; j++) {
            const cell = row.insertCell(j);
            cellClickAddColor(cell);
            cellClear(cell);
            cellHoverAddColor(cell);
            //cellColorCheck(cell);
        }
    }
}

Thanks!

#2

Please ask a specific question. Both threads are all over the place and you haven’t stated your expectations.

1 Like
#3

Forum mentor told me to try it this way, so I ended up doing more functions to it.

function makeGrid() {
    for (let i = 0; i < pHeight.value; i++) {
        const row = pCanvas.insertRow(i);
        for (let j = 0; j < pWidth.value; j++) {
            const cell = row.insertCell(j);
            cell.addEventListener('click', function() {
                this.style.backgroundColor = colorPicker.value;
            })
        }
    }
}

but when I came to the cellColorCheck it acted weird, I wanted to make a function that checks ALL cells and makes the input submit button unclickable (disabled) when a single cell is colored (is not equal to “”).
I tried first by doing the function and putting it into the hover event handler, then tried adding it into on mousedown for easier testing, added also on button but nothing worked, since there are iterations in makeGrid().
I know I could forget this, make it with jQuery or with js only using nodes only and the rows[].cells[]. I stuck here and I want to see if it’s possible to do it the way I started, because he told me to start it that way, so I’d have to make a new one to make all the other stuff if it’s not possible. So I need help, can’t let this go this easy :smiley:

#4

The way you construct the table has nothing to do with the task of checking each cell. Runs once, makes the table, the rest of the logic is separate. If the counting function is misbehaving, debug that (and at what time you are calling it).

1 Like
#5

explanation what I am trying to do: https://pastebin.com/1wqfPuid
I need more than that, idk how to debug yet, just doing some casual newbie project and learning the code
Advices appreciated

#6

You still haven’t shown what code doesn’t work and how.

But I’d take a different approach either way — just have the button disabled by default and enable it on first draw.

#7

I wrote what doesn’t work…
The cellColorCheck is what doesn’t work
I did disable it by default, it’s 13th line, btn1.disabled = true;
As I said, I wanted to make it go disable/enable when mouse enters the table according to cells being all “” (disabled btn1) and if any colored (enabled btn1)
How do I make it work, and what approach

#8

Ehhh, what values are you getting, what is it that’s making you conclude it doesn’t work? You can’t be vague and expect results.

But yeah, if you want to also disable it again on a manual clearing or whatever the condition would be, the code needs to be more complicated than what I wrote in the previous post I’d do. Looping over many elements feels inefficient, so I’d use a global array that would represent whether a cell is manually colored or not. I’d update it in the coloring callback and then the check would just be if all elements are 0.

#9

code is there, copy it lol
I said, cellColorCheck function and everything with it…
disable button on manual clearing? you mean like when pressing a button? Ye I can add the btn1.disable=true;
I want that it does what I explained above tho.
Idk how to write the code that will check cells from 0 to last, because if I use the cell from the makeGrid, cuz of iteration it loops in makeGrid and doesnt go normal path.
could u just code it fast so I see what you mean with the last part, I mean it’s few block codes wont take u that much?
thx!

#10

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. You can find the curriculum at https://freecodecamp.org.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

Happy coding :slight_smile:

1 Like
#11

When reddit manages to help on identically constructed thread :smiley: