[Help] I cannot find class="meaning" after document load

There should be a special forum to discuss programming questions like this :slight_smile:

Thanks in advance for any help or pointer.

So, I am trying to access the question-type div like this:

$(window).on('load', function() {

    var questionType = document.getElementById("question-type");
    var childNodes = questionType.childNodes;
    if (questionType.className.localeCompare("reading") == 0){
        questionType.style.backgroundImage = "none";
        questionType.style.backgroundColor = "red";
    } else if (questionType.className.localeCompare("meaning") == 0){
        questionType.style.backgroundImage = "none";
        questionType.style.backgroundColor = "blue";
    }

});

But the className attribute of questionType is empty.
When I debug and put a breakpoint there, the function triggers before the page finalized its loading (the Wanikani revolving logo is still in the screen.

But if I continue after the breakpoint and inspect the element again, I find out this div has now the class I am trying to access:

I am guessing that WK has some kind of function that is adding this class to the question-type div after my function triggers.
Do you have any idea how could I make my script trigger after all changes to the DOM by WK are done?

2 Likes

It’s probably a good idea to explain what your end goal is. After you get that class, what do you do with it? Change the appearance of the div? People may be able to help you better (e.g. find other ways to do this) if you tell us what you’re trying to do.

2 Likes

Exactly. I want to be able to change its color depending on the type of question. If it’s “meaning” it will have a color. If it’s “reading” it will have a different color.

1 Like

You could inject some CSS in the document so that it doesn’t matter at which point in time the code runs:

let s = document.createElement("style");
s.innerHTML = `
.meaning { ... }
.reading { ... }
`;
document.head.appendChild(s);

You can use more specific CSS selectors if necessary.

4 Likes

The bar underneath the element (where it says “Kanji Meaning” or “Kanji Reading”) does change its color already… If that’s not visible enough for you, maybe you can try to piggyback off of that behavior and add your desired change based on it?

5 Likes

thanks @TheCodingFox @NicoleRauch , I found the solution thanks to you both:
I had to use the selectors:

#question #question-type.meaning {...}
#question #question-type.reading {...}

which is what WK uses to paint the cell black/white depending on the question type.

2 Likes