Broken customized Anki decks (javascript problem?)

Hi, I’m getting this ole same error upon upgrading to 2.1:
Invalid HTML on card: TypeError: Cannot read property ‘addEventListener’ of null

Yes, there’s another thread about this error, but it was never resolved and closed.

I believe I customized these off of a hinekidori template?
apkg of a card in the deck (so you can see the html)

Kanji reading (front, back) html: <div class="bglayervoc2"><p class="voc"><div class="title animated fadeInLeft" - Pastebin.com, Kanji Reading{{FrontSide}}<p class="english">{{FocusReading}}</p><div cl - Pastebin.com

The other thread mentions it’s because 2.1 doesn’t have JS Booster, but that can’t be right. I just downgraded and checked–I don’t seem to have JS Booster installed on 2.0 and it works fine. So what’s wrong, and how can I fix these cards? :cry:

1 Like

Maybe @hinekidori would know?

1 Like

These days I’m using something other than Anki, so I can’t be sure. But my understanding is that the recent versions of Anki no longer support the js I was using.

Sorry I couldn’t be more helpful. :sweat:

Can you provide an apkg with a card that exhibits your issue? One of your cards is trying to access an element that doesn’t exist. In the exact case I tried (your referenced apkg with your front/back content applied), it was JavaScript trying to access typeans for a card that was not a cloze.

I think I heard (that you use a diff place now) but there isn’t a stand-alone app where I can edit the notes can I? :< like extensive grammar notes I have
Well, idk what the site you use now is like. I should look up more about it but hn. Thanks for taking a look anyway tho.

The apkg link is already there in “apkg of a card in the deck”

Got it. The cards in that apkg work for me out of the box using Anki 2.1.15. When I applied your front/back styling, then the issue surfaced, but it wasn’t about adding an event listener. It was instead an issue accessing childNodes of null since your JavaScript was trying to access typeans on a non-cloze card. That was the only issue for me.

(opens mouth)
(closes mouth)
(covers face, apologizing) I’m sorry, I’m too dumb to understand what that means. :sob: haha;;;
How would I fix this, sorry? T uT
Honestly I don’t know what “typeans” is. :joy: I just… copied and pasted all those years ago, did a lot of blind fiddling.

Sorry for the delay in response. I was mobile for a bit. Also, no worries at all–this sort of thing isn’t about intellect. I admit it might be a bit tricky if you don’t have experience with JavaScript going into it, though.

To recap from earlier, here’s how I reproduced what I think is your issue:

  1. Import your apkg (no issue).
  2. Apply your front/back styling (now there is an issue with childNodes on the back of the card of type “Kanji Recall”)

To fix this particular issue, we have to give your JavaScript a way to stop running when we’ve determined that we don’t have an element with a typeans id. I’ll show how I did this first and explain more what’s going on afterward.

On the Back Template of your cards, I’d add this line below <script>:

function main() {

And then add this right before var htmlNodeLength =document.getElementById('typeans').childNodes.length;:

if (!document.getElementById('typeans')) {
  return;
}

And finally add these two lines right above </script>:

}
main();

This wraps all of your JavaScript into a function and allows us to return early from the function if we discover we can’t find an HTML element with the typeans ID in your card. typeans is the ID of an HTML element that Anki adds to cloze cards. Your Kanji Meaning and Kanji Reading cards are both cloze cards, so they happen to have a typeans element (generated for the card by Anki behind the scenes). The Kanji Recall card is not a cloze-type card, though, and so Anki doesn’t generate the typeans element for us. This is what causes your script to crash.

Why your styling might have worked in previous versions of Anki, I admit I do not know.

Cheers!

2 Likes

Oof. Sadly it didn’t work, but I think you’re definitely going the right direction. :sob:

Rats. That there are still issues on your end suggests to me that either the formatting/content of your cards really is different than what I have by simply applying your formatting to the apkg you provided or that you’re using a different version of Anki than I am.

I understand you’re using Anki 2.1. Can you share which minor version (2.1.x) you’re using and also which Qt version Anki is using? You can find this in Help -> About.... The Qt version info may be unnecessary, but I ask since I’m not sure whether Anki uses its own JavaScript engine or Qt’s.

:'< Thanks for sticking around

Version 2.1.15 (442df9d6) x64
Qt 5.12.1 PyQt 5.11.3
image

No problem!

And bummer, I was hoping for perhaps a version difference. I have the exact same version but a different experience than you =\ I don’t have any add-ons, though, nor am I familiar with the ones you’re using. Those certainly cause differences in behavior, but I’m unsure if they’d cause the problem you’re seeing. I’m afraid I can’t be much more help :frowning:

1 Like

Thanks anyway! :3 <3

in the meantime waiting to see if anyone else knows, running both versions ; _;

God. They’re discontinuing 2.0 sync so I’m screwed. Heeeelp. ; _;

Hi, this deck looks very pretty. Where can I find it?
Is it uploaded to ankiweb?
Thanks a lot! :slight_smile:

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.