Javascript innerHTML not working consistently

[anki_user_839834]

Hello,

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>

<hr>

{{illustration}}

<hr>

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

<hr>

{{cloze:Text}}

<br>

{{single_word_audio}}

<hr>

{{translation}}

<hr>

{{sentenceSource}}

{{phoneticalHint}}

<script>

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];

</script>

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!

[dae]

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.

https://addon-docs.ankiweb.net/debugging.html#webviews

[anki_user_839834]

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

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;