action-btn 需要点击两次才能执行点击

Question

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

button.addEventListener("click", function(){
    var container = document.getElementById("mostrarc");
        
    if(container.style.display === "none") {
        container.style.display = "block"
    } else {
        container.style.display = "none";
    }
});

需要点击两次才能实现功能

这个按钮的作用是点击的时候会出现一个新的div，我想点击之后改变按钮的标题

Answer 1

很可能与

container

元素的初始状态有关。正如我在评论中提到的，避免设置

style

属性，而是使用 CSS 类，这使得 JS 代码变得非常简单。

// Get your DOM references just once, not every time a function runs.
var button = document.getElementById("action-btn");
var container1 = document.getElementById("mostrarc1");
var container2 = document.getElementById("mostrarc2");

button.addEventListener("click", function(){
  // Just toggle the use of the class which removes the need for if/then
  container1.classList.toggle("hidden");
  container2.classList.toggle("hidden");
});

#mostrarc1 {
  width:75px; height:75px; background: #e0e0e0; margin:25px;
}
#mostrarc2 {
  width:75px; height:75px; background: #ff0; margin:25px;
}

/* This class is applied in the HTML so the element will initially be hidden.
   But, when the button is clicked, the use of the class will be toggled.  */
.hidden { display:none; }

<button type="button" id="action-btn">Show/Hide</button>
<div id="mostrarc1" class="hidden">Container Area 2</div>
<div id="mostrarc2">Container Area 1</div>

Answer 2

作为反例你声称你“需要点击两次才能实现功能”，我展示了这个可运行的片段，它逐字使用你的代码，只需要点击一次。

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

button.addEventListener("click", function(){
    var container = document.getElementById("mostrarc");
        
    if(container.style.display === "none") {
        container.style.display = "block"
    } else {
        container.style.display = "none";
    }
});

<button id="action-btn">Action</button>
<div id="mostrarc">Example</div>

如果有适用于元素样式的 CSS 导致它最初隐藏

display: none

，那么您将得到您可能遇到的意外行为。最初 CSS 定义样式，然后在您设置

.style.display = "none"

之后，您现在拥有内联样式和 CSS 规则。内联样式将被创建（如果之前不存在）并将取代 CSS 样式规则，即使样式更改是相同的。这个版本一开始貌似“需要点两下”

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

button.addEventListener("click", function(){
    var container = document.getElementById("mostrarc");
    
    console.log(container.style);    
    if(container.style.display === "none") {
        container.style.display = "block"
    } else {
        container.style.display = "none";
    }
});

#mostrarc {
  display: none
}

<button id="action-btn">Action</button>
<div id="mostrarc">Example</div>

这里发生的是，最初没有内联样式，所以

container.style.display

是空字符串，所以

container.style.display === "none"

是假的，然后您的代码显式设置

container.style.display = "none"

并保持隐藏状态。但是在第一次点击之后，现在你 do 有一个内联样式，并且切换将按预期运行。

Answer 3

所以你想让按钮在显示/隐藏之间切换？

const
  button = document.getElementById('action-btn'),
  container = document.getElementById('mostrarc');
button.addEventListener('click', (e) => {
  const isHidden = container.style.display === 'none';
  if (isHidden) {
    container.style.display = 'block';
    button.innerText = 'Hide';
  } else {
    container.style.display = 'none';
    button.innerText = 'Show';
  }
});

<button id="action-btn">Hide</button>
<div id="mostrarc">Some visible content...</div>

解决这个问题的更好方法是一种风格：

const
  button = document.getElementById('action-btn'),
  container = document.getElementById('mostrarc');
button.addEventListener('click', (e) => {
  const isHidden = container.classList.contains('hidden');
  if (isHidden) {
    container.classList.remove('hidden');
    button.innerText = 'Hide';
  } else {
    container.classList.add('hidden');
    button.innerText = 'Show';
  }
});

.hidden { display: none; }

<button id="action-btn">Hide</button>
<div id="mostrarc">Some visible content...</div>

或数据属性：

const
  button = document.getElementById('action-btn'),
  container = document.getElementById('mostrarc');
button.addEventListener('click', (e) => {
  const isHidden = container.hasAttribute('data-hidden');
  if (isHidden) {
    container.removeAttribute('data-hidden');
    button.innerText = 'Hide';
  } else {
    container.setAttribute('data-hidden', '');
    button.innerText = 'Show';
  }
});

div[data-hidden] { display: none; }

<button id="action-btn">Hide</button>
<div id="mostrarc">Some visible content...</div>