Need help with JavaScript in Anki

WaniKani API And Third-Party Apps
1

Front of the card:

<div id="type">
音読み：{{type:ONyomi}}
訓読み：{{type:KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("type").innerHTML = "{{type:KUNyomi}}";
} else {
  document.getElementById("type").innerHTML = "{{type:ONyomi}}";
}
</script>

Back of the card

<div id="onyomi">音読み：{{ONyomi}}</div>
<div id="kunyomi">訓読み：{{KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("kunyomi").style.fontWeight = "bold";
  document.getElementById("onyomi").style.color = "gray";
} else {
  document.getElementById("onyomi").style.fontWeight = "bold";
  document.getElementById("kunyomi").style.color = "gray";
}
</script>

What’s wrong with it? Why is it not working? Provided, I have no experience in Javascript.

Damn, I should have read the manual.

2

Front card brackets aren’t closed, right?

else { document.getElementByClass("type").innerHTML = "{{type:ONyomi}}"; </script>

1 Like
3

Corrected, but that’s still not it.

The code in the back used to work, but now it stopped working.

BTW, wanakana chunk is still working (with some bugs on Anki Desktop version, but not on AnkiDroid version).

//
I edited the code a bit. Now, it works only in the back, but not in the front:

Front of the card:

<div id="type">
音読み：{{type:ONyomi}}
訓読み：{{type:KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("type").innerHTML = "{{type:KUNyomi}}";
} else {
  document.getElementById("type").innerHTML = "{{type:ONyomi}}";
}
</script>

Back of the card

<div id="onyomi">音読み：{{ONyomi}}</div>
<div id="kunyomi">訓読み：{{KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("kunyomi").style.fontWeight = "bold";
  document.getElementById("onyomi").style.color = "gray";
} else {
  document.getElementById("onyomi").style.fontWeight = "bold";
  document.getElementById("kunyomi").style.color = "gray";
}
</script>
4

Solved, albeit partially.

Now it becomes:

Front of the card:

<div id="typeON">{{type:ONyomi}}</div>
<div id="typeKUN">{{type:KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("typeON").style.display = "none";
} else {
  document.getElementById("typeKUN").style.display = "none";
}
</script>

Back of the card

<div id="onyomi">音読み：{{ONyomi}}</div>
<div id="kunyomi">訓読み：{{KUNyomi}}</div>
<script>
if ( "{{WK_emphasis}}" == "kunyomi" ) {
  document.getElementById("kunyomi").style.fontWeight = "bold";
  document.getElementById("onyomi").style.color = "gray";
} else {
  document.getElementById("onyomi").style.fontWeight = "bold";
  document.getElementById("kunyomi").style.color = "gray";
}
</script>

It seems that innerHTML does not work with Anki, but most of the things CSS do.
Also, ‘class’ doesn’t work, but ‘id’ works.

Still, when KUNyomi is prompted, ‘wanakana.js’ portion doesn’t work. So, I am forced to type in Hepburn romanization – for aesthetics, not to mention I am quite a visual learner. — This is a bug.