action-btn按钮需点击两次才触发功能，需实现点击后修改按钮标题

问题根源 #

你遇到的两次点击才触发功能的问题，是因为代码只判断了元素的行内样式style.display。如果mostrarc容器默认显示是通过CSS类或浏览器默认样式（比如默认block），初始时container.style.display是空字符串，不等于"none"，第一次点击会执行else分支把它设为none，第二次点击才会触发显示逻辑。

修复并实现需求的代码 #

方案1：基于计算样式判断（无需修改CSS） #

var button = document.getElementById("action-btn");
var container = document.getElementById("mostrarc");

// 初始化按钮文本，匹配容器初始状态
button.textContent = window.getComputedStyle(container).display === "none" ? "显示内容" : "隐藏内容";

button.addEventListener("click", function(){
    var currentDisplay = window.getComputedStyle(container).display;
    
    if(currentDisplay === "none") {
        container.style.display = "block";
        this.textContent = "隐藏内容";
    } else {
        container.style.display = "none";
        this.textContent = "显示内容";
    }
});

方案2：基于CSS类切换（更优雅推荐） #

先给容器加CSS类控制显示：

.hidden {
    display: none;
}

然后编写JS代码：

var button = document.getElementById("action-btn");
var container = document.getElementById("mostrarc");

// 初始化按钮文本
button.textContent = container.classList.contains("hidden") ? "显示内容" : "隐藏内容";

button.addEventListener("click", function(){
    // 切换容器的隐藏状态
    container.classList.toggle("hidden");
    // 同步切换按钮文本
    this.textContent = container.classList.contains("hidden") ? "显示内容" : "隐藏内容";
});

代码说明 #

1. 解决两次点击问题：用window.getComputedStyle获取元素实际的显示状态（方案1），或通过CSS类的存在状态判断（方案2），避免了仅依赖行内样式的判断误差。
2. 实现按钮标题修改：初始化时根据容器初始状态设置按钮文本，点击时同步切换按钮文本，保持交互状态一致。

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