带参数JavaScript函数仅生效一次，无法重复调用求助

原问题代码 #

HTML代码 #

<button class="taken" id="A05" onclick="funcao('A05')">05</button>
<button class="free" id="A04" onclick="funcao('A04')">04</button>
<button class="taken" id="A03" onclick="funcao('A03')">03</button>
<button class="free" id="A02" onclick="funcao('A02')">02</button>
<button class="taken" id="A01" onclick="funcao('A01')">01</button>

JavaScript函数 #

function funcao(str){
    a = '#' + str;
    const botao = document.querySelector(a);

    const colecao = document.getElementsByClassName("free");
    for(let x = 0; x < colecao.length; x++){
        //alert(`Botao atual: ${colecao[x].id}`);
        if(colecao[x].id == botao.id){
            const aviso = document.querySelector('#default');
            aviso.id = 'warning';
            botao.style.backgroundColor = "rgb(255, 68, 0)";
            break;
        }
        else if(colecao[x].id < botao.id){
            const aviso = document.querySelector('#default');
            aviso.id = 'ativo';
            break;
        }
    }
}

问题根源 #

• 提示元素获取失效：首次点击时，你将#default元素的ID修改为warning或ativo，后续点击时document.querySelector('#default')无法找到目标元素，导致代码执行中断。
• 按钮状态未更新：点击free类按钮后，未将其类名改为taken，导致该按钮始终被纳入free集合，逻辑上不符合“已选中”的状态。
• 全局变量污染：变量a未用let/const声明，会污染全局作用域。

修复方案 #

优化后的JavaScript代码 #

function funcao(str){
    const a = '#' + str; // 声明局部变量，避免全局污染
    const botao = document.querySelector(a);
    // 固定获取提示元素（推荐用类控制状态，而非修改ID）
    const aviso = document.querySelector('#default');

    // 先移除提示元素的所有状态类，避免状态叠加
    aviso.classList.remove('warning', 'ativo');

    // 判断当前按钮状态
    if(botao.classList.contains('taken')){
        // 点击已占用按钮，显示警告
        aviso.classList.add('warning');
        return;
    }

    // 点击可占用按钮，执行选中逻辑
    aviso.classList.add('ativo');
    botao.style.backgroundColor = "rgb(255, 68, 0)";
    // 更新按钮状态类，标记为已占用
    botao.classList.remove('free');
    botao.classList.add('taken');
}

配套CSS调整（可选） #

如果之前是通过ID控制提示样式，建议改为类选择器：

#default { /* 默认状态样式 */ }
#default.warning { /* 警告状态样式 */ }
#default.ativo { /* 激活状态样式 */ }

关键优化点 #

1. 用类代替ID控制状态：保留提示元素的defaultID，通过添加/移除类来切换状态，确保每次都能正确获取元素。
2. 简化逻辑判断：直接检测按钮的类名，无需遍历free集合，提升代码效率。
3. 更新按钮状态：点击free按钮后，将其类改为taken，避免重复处理。
4. 规范变量声明：将a声明为局部变量，避免全局作用域污染。

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