没错，你确实需要把句子里的每个单词拆成独立的<span>标签才能实现点击单个单词的需求！

为什么原代码不生效？ #

你当前的代码里，整个句子都在一个<p>标签里，点击时event.target指向的是整个<p>元素，而不是单个单词——浏览器没法把一段连续的文本拆分成可单独点击的单元，所以你绑定的点击事件只能作用于整个段落，自然没法实现单个单词的高亮和选中值存储。

具体实现步骤 #

这里推荐用事件委托的方式，更高效且易于维护：

1. 准备父容器

先保留段落容器，后续用JS自动拆分文本为单个单词元素：

<p class="word-container">Select the choice words that make up the complete sentence.</p>

2. 定义高亮样式

先写好高亮的CSS规则，让选中的单词显示绿色：

.word-item.active {
  color: green;
  background-color: rgba(0, 255, 0, 0.1); /* 可选：加浅绿背景增强视觉区分 */
}

3. JavaScript 核心逻辑

实现文本拆分、点击高亮和选中值存储：

// 用于存储选中单词的变量
let selectedWords = '';

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  const container = document.querySelector('.word-container');
  // 拆分文本为单词数组（过滤空字符串）
  const words = container.textContent.trim().split(/\s+/);
  // 重新构建HTML，每个单词用span包裹
  container.innerHTML = words.map(word => `<span class="word-item">${word}</span>`).join(' ');
  
  // 用事件委托监听点击
  container.addEventListener('click', (event) => {
    const clickedElem = event.target;
    // 确保点击的是单词span
    if (clickedElem.classList.contains('word-item')) {
      // 切换高亮状态
      clickedElem.classList.toggle('active');
      // 更新选中变量：收集所有高亮单词，拼接成字符串
      selectedWords = Array.from(document.querySelectorAll('.word-item.active'))
        .map(span => span.textContent)
        .join(' ');
      // 可打印查看变量值
      console.log('当前选中的单词：', selectedWords);
    }
  });
});

关键细节说明 #

• 事件委托优势：不需要给每个<span>单独绑定点击事件，只监听父容器的点击即可，性能更优，后续新增单词也无需重新绑定事件。
• 选中值更新逻辑：每次点击后，通过查询所有带active类的<span>，自动拼接成字符串存入变量，完美匹配你“选中值以字符串形式存储”的需求。

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