Javascript from one note type affecting cards of another note type

Anki Card Design
1

I have a deck that contains cards from 6 different note types. One note type has JS that dynamically sets the cards’ background color. The other note types have no JS.

When a card of the other 5 note types appears immediately after a card of the first note type, its background color is changed to the same color as the previous card. When I click Edit and view the card, it’s bg color is back to normal.

Any idea what’s causing this?

Here is the code I’m using to change the bg color:

if ( match == null || match[0][1]  === " " )
	{ document.body.style.background = "darkred"; }
else if ( match[0][1]  === "ˋ" )
	{ document.body.style.background = "blue" ; }
else if ( match[0][1]  === "˙" )
	{ document.body.style.background = "grey"; }
else if ( match[0][1]  === "ˊ" )
	{ document.body.style.background = "goldenrod"; }
else
	{ document.body.style.background = "darkgreen"; }
1 Like
2

This is caused by the fact that, on desktop Anki, the document object, the <header> content and the <body> tag’s attributes are not reset in the reviewer as you advance to the next card. So, for example, inline styles added to the <body> remain there as long as you keep the reviewer open.

The fix would be to instead add a css class to the body. And then, in those specific note types, set the background using that class in the card Styling section. The added css class in the <body> would still leak into the reviews of the other card types but because those card types would not have the css using the classes, the background doesn’t change.

if ( match == null || match[0][1]  === " " )
	{ document.body.classList.add("bg-darkred"); }
else if ( match[0][1]  === "ˋ" )
	{ document.body.classList.add("bg-blue"); }
else if ( match[0][1]  === "˙" )
	{ document.body.classList.add("bg-grey"); }
else if ( match[0][1]  === "ˊ" )
	{ document.body.classList.add("bg-goldenrod"); }
else
	{ document.body.classList.add("bg-darkgreen"); }

I wouldn’t actually name the class by the color as then I’d feel compelled to change the class name whenever I wanted to change the color. Instead I’d set the class name semantically by whatever regex case you seem to be matching there.

Styling

body.bg-darkred {
	background: "darkred";
}
body.bg-blue {
	background: "blue";
}
body.bg-grey {
	background: "grey";
}
body.bg-goldenrod {
	background: "goldenrod";
}
body.bg-darkgreen {
	background: "darkgreen";
4 Likes
3

Is there something else I need to do? The background colors aren’t being applied at all now that I’ve made those changes.

My if statements look like this

if ( match === null || match[0][1]  === " " )
	{ document.body.classList.add("high");  }

and my classes look like this

body.high {
	background: "darkred";
}
4

After testing it out, it seems that using document.body.classList.add(...) or document.body.className += ... and testing with console.log(document.body.className) showing that the className has indeed changed, in the actual DOM it hasn’t changed… I’m not sure why. Maybe you need to wait until everything’s loaded though

You can target the <div id="qa"> element instead with this:

var qaDiv = document.querySelector("#qa")
if ( match === null || match[0][1]  === " " )  {
  qaDiv.classList.add("high");
}

And your css changes to:

#qa.high {
  background: "darkred";
}

The qa div wraps the whole card content but it’s by default smaller than the body so the background you set won’t be the whole card. You can modify this by making the qa div occupy the entire body. Though this will probably minorly break some assumed positioning of stuff.

body {
  /* the body doesn't appear to have margin or padding and yet without this the qa has
      margins around it... */
  margin: 0;
}
#qa {
  /* fill whole viewport */
  height: 100vh;
}
5

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