DOM元素首次点击后禁用可点击性的实现代码未生效咨询

• 行内样式属性名拼写错误：CSS控制指针交互的属性转JS驼峰写法为 pointerEvents（带末尾s），你写的 pointerEvent 缺少s，浏览器无法识别，禁用逻辑完全没有生效
• 逻辑和需求冲突：你使用 classList.toggle("active") 做类切换，本身就支持多次点击切换状态，和“点击一次即禁用”的目标矛盾，加上之前的禁用样式没生效，用户可以反复点击切换类名
• 遍历的形参和外层数组重名，容易造成作用域遮蔽的逻辑混乱

let counter = 0;

inputOptions.forEach((option) => {
    option.addEventListener("click", () => {
        // 首次点击直接设置禁用，阻断后续交互
        option.style.pointerEvents = 'none';
        option.classList.add("active");

        if (option.innerHTML === "Dhaka") {
            counter++;
        } else { 
            counter = 0; 
        }
    })
})

function getResult() {
    document.getElementById("result").innerHTML = "No of Correct answer:" + counter;
}

• 可以提前在CSS中定义可复用的禁用类，减少行内样式的冗余：

  .option-disabled {
    pointer-events: none;
    opacity: 0.6;
  }
  

  点击触发后直接给元素添加 option-disabled 类即可实现禁用
• 计数逻辑可以根据业务需求调整：当前逻辑是选到非“Dhaka”的选项时会把计数器清零，如果需要保留所有正确选项的计数，不需要在else分支重置counter

内容的提问来源于stack exchange，提问作者Kazi Monirul Islam