按钮需点击两次才生效问题求助（附HTML/JS代码）

问题根源 #

你代码里给按钮用了on作为自定义属性名，这和DOM元素原生的事件绑定属性（比如onclick这类）重名冲突了。JS里直接通过.on获取属性值时，拿到的不是你设置的"false"，而是和事件相关的无效值，导致首次点击时条件判断不成立，走了else分支把属性设成"false"，第二次点击才会进入正确分支，所以需要点两次才生效。

另外，就算属性名不冲突，直接用元素对象的.属性名获取自定义属性也不是规范做法，应该用getAttribute()方法来读取。

修复方案 #

方案1：修改自定义属性名（推荐）

把按钮的自定义属性改成data-state这类不会和原生属性冲突的名字，同时调整JS逻辑：

修改后的HTML：

<button id="bt" data-state="false" onclick="onOf()">
      display
</button>

<div id="bookmark" style="visibility: hidden">
  <!-- div内容 -->
</div>

修改后的JS：

function onOf() {
  const btn = document.getElementById("bt");
  const bookmark = document.getElementById("bookmark");
  const currentState = btn.getAttribute("data-state");
  
  if (currentState === "false") {
    btn.setAttribute("data-state", "true");
    btn.innerHTML = "hide";
    bookmark.style.visibility = "visible";
  } else {
    btn.setAttribute("data-state", "false");
    btn.innerHTML = "display";
    bookmark.style.visibility = "hidden";
  }
}

方案2：直接基于div状态判断（更简洁）

不用依赖按钮的自定义属性，直接通过div当前的visibility状态来切换，逻辑更直观：

JS代码：

function onOf() {
  const btn = document.getElementById("bt");
  const bookmark = document.getElementById("bookmark");
  
  if (bookmark.style.visibility === "hidden") {
    btn.innerHTML = "hide";
    bookmark.style.visibility = "visible";
  } else {
    btn.innerHTML = "display";
    bookmark.style.visibility = "hidden";
  }
}

对应的HTML可以去掉冲突的属性：

<button id="bt" onclick="onOf()">
      display
</button>

<div id="bookmark" style="visibility: hidden">
  <!-- div内容 -->
</div>

额外优化建议 #

• 尽量避免HTML内联onclick事件，推荐用JS的addEventListener绑定事件，代码更清晰易维护。
• 可以用classList.toggle()结合CSS类来控制显示隐藏，比直接操作style属性更灵活。

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