使用JavaScript通过下拉选择框修改段落指定文本的内容与颜色

原有代码错误点 #

• 语法混用：document.ready、.click()、.html()均为jQuery专属方法，原生JS调用会直接报错
• 选择器格式错误：获取ID对应的元素时，选择器需要添加#前缀，例如获取ID为button_change的按钮要写document.querySelector('#button_change')
• 变量逻辑混乱：已定义的下拉值变量未使用，反而调用了未声明的inputValue变量
• 匹配元素不全：querySelector仅能匹配第一个符合条件的元素，无法修改所有位置的颜色文本
• 缺少颜色设置逻辑：未实现字体颜色同步变更的功能

修正后的完整代码 #

原生JS代码（无需引入jQuery） #

// 等待DOM内容全部加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 获取修改按钮元素
  const changeBtn = document.querySelector('#button_change');
  // 绑定点击事件
  changeBtn.addEventListener('click', function() {
    // 读取下拉框选中的颜色值
    const targetColor = document.querySelector('#input_color').value;
    // 获取所有需要修改的颜色文本元素
    const colorTextEls = document.querySelectorAll('.cow_color');
    // 遍历修改所有元素的文本和字体颜色
    colorTextEls.forEach(item => {
      item.textContent = targetColor;
      item.style.color = targetColor.toLowerCase();
    });
  });
});

HTML代码（已翻译为中文） #

<h2>
  <span class="cow_color">蓝色</span>的牛 作者：格莱特·伯吉斯（刊载于《云雀》，1895年）
</h2>
<p>
  我从未见过一头<span class="cow_color">蓝色</span>的牛，也从不奢望能见到；但无论如何我可以告诉你，我宁愿见到也不愿变成它。
</p>
<p>
  将牛的颜色修改为:
  <select id="input_color">
    <option value="Purple">紫色</option>
    <option value="Green">绿色</option>
    <option value="Red">红色</option>
    <option value="Yellow">黄色</option>
    <option value="Teal">蓝绿色</option>
  </select>
  <button id="button_change">确认修改</button>
</p>

修改后点击确认修改按钮，所有标注为cow_color类的文本会同步替换为选中的颜色名称，同时字体颜色也会变更为对应的颜色。

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