如何在Anki背面模板中获取正面模板<input>元素的id属性

Anki翻牌时，正面和背面是独立渲染的DOM结构，直接在背面调用getElementById获取正面的input元素是行不通的。要实现跨模板传递输入值，得先把正面的输入值存起来，再在背面读取，具体实现如下：

1. 修改正面模板，实时保存输入值 #

在正面模板添加JS代码，监听输入框内容变化，把值存在sessionStorage中（仅在当前卡片会话内有效，不会干扰其他卡片）：

<p>652 - 558</p>
<input type="text" id="answer">
<script>
// 监听输入，实时保存值
const answerInput = document.getElementById("answer");
answerInput.addEventListener('input', () => {
    sessionStorage.setItem('anki_user_answer', answerInput.value);
});
// 页面加载时回填缓存值（可选，方便重新编辑）
window.addEventListener('load', () => {
    const savedValue = sessionStorage.getItem('anki_user_answer');
    if (savedValue) answerInput.value = savedValue;
});
</script>

2. 修改背面模板，读取值并处理逻辑 #

在背面模板从sessionStorage读取保存的值，同时修正原代码里的语法错误：

<div class="answer-display-area"></div>
<script>
// 读取正面输入的值，默认空字符串
const userAnswer = sessionStorage.getItem('anki_user_answer') || '';
const displayArea = document.getElementsByClassName("answer-display-area")[0];

if(userAnswer === "94"){
    const pElement = document.createElement("p");
    pElement.innerHTML = `<p>652−558</p><p style="background-color:#77fc03;">${userAnswer}</p>`;
    displayArea.appendChild(pElement);
} else {
    const pElement = document.createElement("p");
    pElement.innerHTML = `<p>652−558</p><p style="background-color:red;">${userAnswer}</p>`;
    displayArea.appendChild(pElement);

    // 创建正确答案和解释的DOM元素
    const correctAnswer = document.createElement("p");
    correctAnswer.textContent = "Answer: 94";
    const explanation = document.createElement("p");
    explanation.textContent = "Answer is 94. Please refer to 5th page. Carry down 1 from the ten's place because the one's place can't subtract 8 from 2.";
    
    // 插入到显示区域前方
    displayArea.parentNode.insertBefore(correctAnswer, displayArea);
    displayArea.parentNode.insertBefore(explanation, displayArea);
}
// 清除缓存，避免影响下一次复习
sessionStorage.removeItem('anki_user_answer');
</script>

原代码的关键错误修正 #

• 缺少document.前缀：getElementById、getElementsByClassName必须通过document调用
• getElementsByClassName返回元素集合，需通过[0]获取第一个匹配元素
• 不能直接将字符串传入insertBefore，必须先创建对应的DOM元素
• ${answer}会输出input对象本身，需使用输入值（如userAnswer）
• document.displayArea是错误引用，应使用获取到的displayArea变量
• 标签闭合错误：原背面模板的<div>未正确闭合

内容的提问来源于stack exchange，提问作者Hiroto Takao