您正在向同一元素添加两个相同的事件监听程序。这意味着您在此处创建的事件监听程序：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "flex";
})

以及在此处创建的事件侦听器：

document.getElementById("bar").addEventListener("click", function(){
    document.querySelector(".messagebar").style.display = "none"
)}

都是在点击时同时执行的。这意味着显示首先被设置为Flex，其次被设置为None，因此您无法使其工作。
为了解决这个问题，我们希望将其压缩到一个事件监听器中。

document.getElementById("bar").addEventListener("click", () => {
    const messageBar = document.querySelector('.messagebar')
    const display = messageBar.style.display
    // if display is flex sets it to none else sets it to flex
    messageBar.style.display = display === 'flex' ? 'none' : 'flex'
});

如果你想用相同的按钮或html元素切换，你必须跟踪.messagebar.style.display的当前状态。

document.getElementById("bar").addEventListener("click", function(){
    const current = document.querySelector(".messagebar").style.display;
    if (current === "none") {
      document.querySelector(".messagebar").style.display = "flex";
    } else {
      document.querySelector(".messagebar").style.display = "none";
    }
})