如何使用JavaScript判断指定id的元素是否带有.active类？

基础逻辑对应转换 #

你写的伪代码直接转成原生JavaScript的写法如下：

// 替换成你的按钮实际id、对应输出盒子的实际id
const targetButton = document.getElementById('button id')
const outputBox = document.getElementById('输出盒子id')
if (targetButton.classList.contains('active')) {
  // 如果是输入类元素用value，普通展示元素用textContent
  outputBox.value = null
  // outputBox.textContent = null
}

多按钮批量实现方案 #

如果有多个按钮需要统一处理，推荐给按钮和输出盒子加关联属性后批量绑定事件，完整实现如下：

1. 示例DOM结构 #

给每个按钮加data-output属性，值为对应输出盒子的id，方便点击时直接关联对应元素：

<!-- 按钮组 -->
<button class="calc-btn" id="btn1" data-output="result1">计算按钮1</button>
<button class="calc-btn" id="btn2" data-output="result2">计算按钮2</button>
<button class="calc-btn" id="btn3" data-output="result3">计算按钮3</button>

<!-- 对应输出结果盒子 -->
<input type="text" id="result1" class="result-box">
<div id="result2" class="result-box"></div>
<textarea id="result3" class="result-box"></textarea>

2. JavaScript逻辑 #

// 获取所有计算按钮
const allCalcButtons = document.querySelectorAll('.calc-btn')

// 遍历给每个按钮绑定点击事件
allCalcButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 判断当前点击的按钮是否有active类
    if (this.classList.contains('active')) {
      // 获取对应输出盒子的id
      const outputId = this.dataset.output
      const targetOutput = document.getElementById(outputId)
      
      // 区分元素类型赋值为null
      if (['INPUT', 'TEXTAREA'].includes(targetOutput.tagName)) {
        targetOutput.value = null
      } else {
        targetOutput.textContent = null
      }
    }
  })
})

适配说明 #

• 如果你的按钮和输出盒子的id有固定命名规则（比如按钮id为calc_xxx，输出id为res_xxx），可以不用加data-output属性，直接通过id拼接获取对应输出元素即可。
• 如果你需要在切换按钮active状态的同时触发赋值操作，把上述判断逻辑放到切换active类的代码后面即可。

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