Javascript innerHTML not working consistently


I’ve run into an issue with the innerHMTL function in a Javascript snippet inserted in the back template of my cards. Here’s the full template:

<div class="targetWord" id="targetWord">place holder</div>




<div id="additionalExplanations">place holder</div>











var backExtra = '{{text:Back Extra}}'.toString();

var hint = '{{text:hint}}'.toString();

var pureLemma = backExtra.replace(hint, '');

document.getElementById("additionalExplanations").innerHTML = pureLemma;

var clozeSentence = '{{text:Text}}'.toString();

const regExClozeFinder = /\{c\d\:\:(.+?)[}:]/;

var targetWord = clozeSentence.match(regExClozeFinder);

document.getElementById("targetWord").innerHTML = targetWord[1];


While previewing the card, the two calls to the innerHTML method usually work. When studying, they don’t unless I go back to the main screen (Decks) and then resume my study session. As you can imagine jumping in and out of a deck is not very pleasant… I have observed the same behavior on my iPhone 6S. Any idea how I could solve the issue? I don’t think it cropped up when my template only contained a single call to the innerHTML method.

Correlated question: Is there any native Anki way (not relying on JS) to display the hidden word in a cloze deletion field? If the field contains the string “Anki is a {{c1::software}}”, I’d like to retrieve “software”.

Just to be clear, the issue is that the string “place holder” is not replaced as expected.

Thanks in advance for your help!

If you use the web inspector in the desktop version to look at how clozes are included in the review screen, you should see that each cloze deletion has a class like .cloze or .cloze-inactive.

1 Like

Thanks for giving me the answer while teaching me something, I didn’t know there was a debugging console!

With the following <script> element, the double call to the innerHTML method works :pray:

var backExtra = '{{text:Back Extra}}'.toString();
var hint = '{{text:hint}}'.toString();
var additionalExplanations = backExtra.replace(hint, '');
document.getElementById("additionalExplanations").innerHTML = "→" + additionalExplanations;

var currentCloze = document.getElementsByClassName("cloze")[0].textContent;
document.getElementById("targetWord").innerHTML = currentCloze;

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