如何使用Javascript在已选中的单选input下方显示计算结果

• 你当前代码硬编码了仅更新theresult1节点的内容，所以结果只会展示在第一个单选框下方
• 没有覆盖所有触发场景：选择支付金额、选择分期数两种操作都需要找到当前选中的分期数对应的结果容器更新，同时清空其余容器的内容避免残留结果

const track = {
    pay: null,
    answer: null,
};

// 清空所有分期结果容器的旧内容
function clearAllResult() {
    document.querySelectorAll('[id^="theresult"]').forEach(el => el.innerHTML = '');
}

document.querySelectorAll("input").forEach((el) =>
    el.addEventListener("change", (e) => {
        const type = e.target.name;
        const value = e.target.value;
        track[type] = value;

        if (track.pay !== null && track.answer !== null) {
            clearAllResult();
            // 找到当前选中的分期数单选框
            const checkedAnswer = document.querySelector('input[name="answer"]:checked');
            // 计算结果，兼容一次性付清除数为0的场景
            let result;
            if(Number(track.answer) === 0) {
                result = `${track.pay} €`;
            } else {
                // 保留两位小数更符合金额展示习惯
                result = `${(Number(track.pay) / Number(track.answer)).toFixed(2)} €/期`;
            }
            // 自动匹配当前选中单选框对应的结果容器，不需要硬编码id
            const resultContainer = checkedAnswer.parentElement.querySelector('[id^="theresult"]');
            resultContainer.innerHTML = result;
        }
    })
);

• 上述代码不需要硬绑定结果容器的id，后续新增分期选项时也能自动适配
• 额外修复了选一次性付清时除数为0导致的NaN问题
• 你当前HTML中的label标签for属性存在拼写错误，建议修正为和对应input的id一致，否则点击label无法选中对应的单选框

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