JavaScript blocks display of the other side of card

I’m designing a card type using JavaScript.
I want a card to show only a part of a field content.
For instance, if Eng field contains
I want the front of the card to display
(the part before new line).

Front template looks like this:

let list = "{{Eng}}".replace("<br>", "\n");
let word = list.match(/.*/);
document.write("Eng: ");

Back template looks like this:


When I review this card, the front side is displayed correctly:
Eng: spine

But when I click Show answer, the back side, instead of showing {{Rus}}
shows the same what was displayed on the front side:
Eng: spine

If I delete JavaScript from the front template and write only {{Eng}}, then both the front and back sides are displayed correctly. But if I add JavaScript on the front side, the other side of the card stops working.

I saw some ideas about using .innerHTML instead of document.write and also about adding {} around the code, but I don’t understand their application and therefore cannot test them.

Is the issue with my code or with Anki? How to fix it?
PS: I’m using latest version of Desktop Anki (2.1.49) on Windows 10.

Just as an aside, this has nothing to do with your topic, but for the ease of read of people you will answer you question: this forum uses Markdown.
This means that to write HTML code, you can enclose it in triple backquotes:

let list = "{{Eng"".replace("<br>", "\n");

will render as

let list = "{{Eng}}".replace("<br>", "\n");
1 Like

Thank you, BlackBeans! I applied it and the post looks better now

The problem here is mainly document.write(), which clears the document on first write as far as I understand from Document.write() - Web APIs | MDN

Try this front template:

<div id="front"></div>

var list = "{{Eng}}".replace("<br>", "\n");
var word = list.match(/.*/);
var front = document.getElementById("front");
front.innerHTML = `Eng: ${word}<br>Rus?`;

You also have to use var instead of let or you will get errors because Anki uses the same webview for front and back templates and only recycles it periodically.