“style.display = 'flex/none'” 不工作

Question

So I thought it would be pretty simple to implement an if statement to have an element appear or disappear at the click of a button.所以我认为实现一个 if 语句来让一个元素在单击按钮时出现或消失是非常简单的。 After a couple of hours now, I have not gotten further than getting the element to disappear.几个小时后，我没有比让元素消失更进一步。 It registers the second click(tested with a console.log), but the display property does not change back to 'flex'.它注册了第二次点击（使用 console.log 测试），但显示属性不会变回“flex”。

I've also already tried different variations of 'getElementById' and 'querySelector' during my sentence.在我的句子中，我也已经尝试过 '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'
    }
}

The 'filler' element is a bootstrap column with this styling. 'filler' 元素是具有这种样式的引导列。

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

Answer 1

hey it is your query selector which is causing the problem and also you can use your filler directly in function because its declared in global scope嘿，是您的查询选择器导致了问题，您也可以直接在 function 中使用您的填充器，因为它在全局 scope 中声明

 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'” 不工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-17 01:37:29

“style.display = 'flex/none'” 不工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-17 01:37:29

解决方案1
0 已采纳 2022-01-17 01:37:29