如何修改价格计算器：切换月度时Info弹窗价格上浮20%

已知现有代码中calcSum函数已经根据支付类型生成了percent系数（月度支付为1.2，年度支付为1），但弹窗价格渲染函数printPreisstaffel未应用该系数，以下是具体修改方案：

需要修改的函数及实现步骤 #

1. 改造printPreisstaffel函数，支持传入价格系数 #

原本的printPreisstaffel直接渲染原始价格档位，现在需要给它添加参数接收percent，在计算显示价格时乘以该系数，确保弹窗价格随支付类型动态调整：

function printPreisstaffel(percent) {
  // 假设preisstaffel是存储价格档位的数组
  preisstaffel.forEach(grade => {
    // 计算调整后的价格，保留两位小数保证格式统一
    const adjustedPrice = (grade.basePrice * percent).toFixed(2);
    // 替换弹窗中对应档位的价格显示
    document.querySelector(`.price-item[data-id="${grade.id}"]`).textContent = `${adjustedPrice} €`;
  });
}

2. 修改Info按钮的触发逻辑，传入对应系数 #

点击Info按钮弹出弹窗时，先获取当前选中的支付类型，计算出对应的percent系数，再传给printPreisstaffel：

document.getElementById('info-btn').addEventListener('click', () => {
  // 获取当前选中的支付方式
  const selectedPayment = document.querySelector('input[name="payment-type"]:checked').value;
  // 复用现有逻辑生成系数
  const percent = selectedPayment === 'monthly' ? 1.2 : 1;
  // 先更新弹窗价格，再显示弹窗
  printPreisstaffel(percent);
  document.getElementById('price-grade-modal').style.display = 'block';
});

3. （可选）支付类型切换时实时更新弹窗价格 #

如果用户在弹窗打开时切换支付方式，需要同步更新弹窗内的价格，给支付类型的单选框添加change事件监听：

document.querySelectorAll('input[name="payment-type"]').forEach(radio => {
  radio.addEventListener('change', () => {
    const percent = radio.value === 'monthly' ? 1.2 : 1;
    // 只有弹窗显示时才更新价格
    if (document.getElementById('price-grade-modal').style.display === 'block') {
      printPreisstaffel(percent);
    }
  });
});

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