"style.display = 'flex/none'" 不工作

Question

所以我认为实现一个 if 语句使元素在单击按钮时出现或消失会非常简单。现在几个小时后，除了让元素消失之外，我没有做更多的事情。它记录了第二次点击（使用 console.log 测试），但显示属性不会变回 'flex'。

我也已经在句子中尝试了 'getElementById' 和 'querySelector' 的不同变体。

const edit = document.getElementById('edit-btn');
const fill = document.querySelector('#filler');

edit.addEventListener('click', popInOut(fill))

function popInOut(e){
    if(e.style.display=='flex'){
        e.style.display='none'
    }else if(e.style.display=='none'){
        e.style.display='flex'
    }
}

'filler' 元素是具有此样式的 bootstrap 列。

#filler{
    display:flex;
    flex-direction: column;
    background-color: #1c1f22;
    position:absolute;
    top:40%;
    height:50%;
}

Answer 1

嘿，是您的查询选择器导致了问题你也可以直接在函数中使用你的填充器，因为它声明了在全球范围内

   const edit = document.getElementById("edit-btn");
   const filler = document.getElementById("filler");
    
    
    edit.addEventListener("click", fix);
    
    function fix() {
      if (filler.style.display === "none") {
        filler.style.display = "flex";
      } else {
        filler.style.display = "none";
      }
    }

body {
  font-family: sans-serif;
}

#filler {
  display: flex;
  /* flex-direction: column; */
  background-color: whitesmoke;
  position: absolute;
  top: 30%;
  left: 20%;
  height: 50%;
  gap: 1rem;
}

#filler div:nth-child(even) {
  background: turquoise;
}

#filler div:nth-child(odd) {
  background: yellowgreen;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="style.css"/>
  </head>

  <body>
    <div id="app">
      <div id="filler">
        <div>Hare krishna</div>
        <div>Radhe Shyam</div>
        <div>Sita Ram</div>
      </div>
      <button id="edit-btn">Edit</button>
    </div>

    <script src="index.js"></script>
  </body>
</html>

"style.display = 'flex/none'" 不工作

"style.display = 'flex/none'" not working

javascript

styles

if-statement

display