JavaScript点击按钮填充文本到输入框并切换背景色问题求助

完整修改代码 #

HTML部分

<button id="red" onclick="setFieldStyle('red', 'first-style')">red</button>
<button id="green" onclick="setFieldStyle('green', 'second-style')">green</button>
<button id="blue" onclick="setFieldStyle('blue', 'third-style')">blue</button>
<button id="purple" onclick="setFieldStyle('purple', 'fourth-style')">purple</button>
<button id="pink" onclick="setFieldStyle('pink', 'fifth-style')">pink</button>
<br />
<p>Du har valgt:</p><input type="text" id="field" />

JS部分

// 预先定义所有颜色样式类，用于批量清空
const allColorClasses = ['first-style', 'second-style', 'third-style', 'fourth-style', 'fifth-style']
// 记录当前处于激活状态的样式类，处理重复点击逻辑
let currentActiveClass = ''

function setFieldStyle(btnText, targetClass) {
  const inputField = document.getElementById('field')
  // 先移除所有颜色类，避免多样式叠加冲突
  allColorClasses.forEach(className => inputField.classList.remove(className))

  if (currentActiveClass === targetClass) {
    // 重复点击同一个按钮，清空输入框内容和激活状态
    inputField.value = ''
    currentActiveClass = ''
  } else {
    // 点击新按钮，设置对应样式和输入框文本
    inputField.classList.add(targetClass)
    inputField.value = btnText
    currentActiveClass = targetClass
  }
}

CSS部分（和原有代码一致，无需修改）

.first-style {
  background-color: rgb(238, 0, 0);
  font-weight: bolder;
}

.second-style {
  background-color: rgb(0, 255, 76);
  font-weight: bolder;
}

.third-style {
  background-color: rgb(17, 0, 255);
  font-weight: bolder;
}

.fourth-style {
  background-color: rgb(176, 0, 199);
  font-weight: bolder;
}

.fifth-style {
  background-color: rgb(255, 13, 162);
  font-weight: bolder;
}

修复说明 #

1. 替换了原有的5个重复toggle函数，统一为通用处理函数，减少冗余代码
2. 每次触发点击时先清空输入框上的所有颜色样式类，解决了多颜色样式叠加导致点击两次同按钮显示旧颜色的问题
3. 新增了输入框value赋值逻辑，点击按钮时自动将按钮文本填入输入框
4. 新增重复点击判断逻辑，两次点击同一个按钮会清空输入框内容和样式，符合交互预期

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