使用input[type="range"]与output元素可实现满意度评分实时显示，通过id与for属性绑定，设置min/max/value/step（如1–5分），用addEventListener监听input事件更新output内容，并支持语义化标签和可访问性优化。

用 input[type="range"] 配合 output 元素，可以实现满意度评分的实时显示，无需 JavaScript 也能完成基础同步（借助 oninput），但更推荐用现代 JS 的 addEventListener 实现清晰可控的响应逻辑。

HTML 结构：绑定 input 和 output

关键在于给 input 设置 id，再让 output 的 for 属性指向它；同时设置合理的 min、max、value 和 step，比如 1–5 分满意度：

<input type="range" id="satisfaction" name="satisfaction" min="1" max="5" value="3" step="1">
<output for="satisfaction" id="score-display">3</output>

用 addEventListener 实时更新 output

监听 input 事件（比 change 更及时，拖动时即触发），读取当前值并写入 output 的 textContent：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

const slider = document.getElementById('satisfaction');
const display = document.getElementById('score-display');

slider.addEventListener('input', () => {
  display.textContent = slider.value;
});

增强体验：添加满意度文字描述

可根据数值动态显示语义化反馈，比如：
• 1–2：「不太满意」
• 3：「一般」
• 4–5：「非常满意」

const labels = {
  '1': '很不满意', '2': '不太满意',
  '3': '一般',
  '4': '比较满意', '5': '非常满意'
};

slider.addEventListener('input', () => {
  display.textContent = slider.value;
  display.title = labels[slider.value]; // 可选：悬停提示
});

可访问性与兼容性提醒

确保 label 关联提升可访问性；output 在所有现代浏览器中支持良好（包括 Safari 12+）；若需兼容旧版 IE，可用 div 替代 output 并手动更新 innerText。

立即学习“前端免费学习笔记（深入）”；

不复杂但容易忽略：别忘了为 range input 添加 <label>，例如 <label for="satisfaction">您的满意度评分：</label>，这对屏幕阅读器用户至关重要。