本文讲解如何解决 javascript 中因变量作用域和模板渲染时机不当导致的“undefined”显示问题，通过延迟 html 内容生成确保用户点击的评分值能正确插入感谢卡片。
本文讲解如何解决 javascript 中因变量作用域和模板渲染时机不当导致的“undefined”显示问题，通过延迟 html 内容生成确保用户点击的评分值能正确插入感谢卡片。
在构建交互式评分组件（如 Frontend Mentor 的 Interactive Rating Component）时，一个常见陷阱是：在用户尚未选择前就将含未定义变量的 HTML 字符串赋值给 DOM 元素。原始代码中，thankYouCard.innerHTML 在脚本初始化阶段就被静态设置，此时 number 仍为 undefined，因此最终显示为 "You selected Undefined out of 5"。
根本原因在于 模板字符串的求值发生在声明时刻，而非使用时刻。即使后续 number 被正确赋值，已插入 DOM 的 HTML 不会自动响应变量变化。
✅ 正确做法是：将 thankYouCard.innerHTML 的赋值逻辑移至 submit() 函数内部，确保此时 number 已被用户点击事件更新：
const cardContainer = document.querySelector('.card-container');
const submitButton = document.querySelector('#submit');
const thankYouCard = document.createElement('div');
const ratingButtons = document.querySelectorAll('.rating');
let number;
// 监听评分按钮点击，实时记录选中值
ratingButtons.forEach(button => {
button.addEventListener('click', e => {
number = e.target.textContent.trim(); // 使用 trim() 防止空格干扰
console.log('Selected rating:', number);
});
});
function submit() {
// ✅ 关键修复：仅在此处动态生成 HTML，确保 number 已赋值
thankYouCard.innerHTML = `
<div id="announcement">You selected ${number || '0'} out of 5</div>
<header>Thank you!</header>
<main id="thank-you">
We appreciate you taking the time to give a rating.
If you ever need more support, don't hesitate to get in touch!
</main>
`;
// 清空原容器并插入新卡片
cardContainer.innerHTML = '';
cardContainer.appendChild(thankYouCard);
}
submitButton.addEventListener('click', submit);⚠️ 注意事项：
- 避免提前渲染：切勿在变量可能为 undefined 时构造依赖它的 HTML 字符串；
- 增加兜底逻辑：如 ${number || '0'} 可防止用户未点击直接提交时显示 undefined；
- 语义化修正：原代码中 id="annoucement" 拼写错误，已更正为 announcement（符合 HTML 规范与可访问性要求）；
- DOM 安全性：若 number 来自不可信来源（如用户输入），应进行 HTML 转义以防范 XSS，但本例中按钮文本为静态数字，可忽略。
总结：动态内容渲染必须严格遵循「数据就绪 → 模板生成 → DOM 插入」的执行顺序。将模板拼接从初始化阶段迁移至事件处理函数内，是解决此类 undefined 显示问题的核心原则。
