点击Font Awesome的fa-plus-square图标无法切换#addPost div显隐问题排查

故障根因 #

你写的DOM元素获取方法存在拼写错误：
JS代码里的document.getElementsById是错误写法，正确的API是document.getElementById，注意Element为单数形式，不要多余的s。ID在HTML文档中是唯一标识，该方法只会返回单个元素，你多写了s导致始终无法获取到addPost元素，后续的显隐逻辑自然无法执行。

修正后的JS代码 #

function showPost(){
    // 修正方法名拼写错误
    let add = document.getElementById("addPost")
    if (add.style.display === "none" ){
        add.style.display = "block"
    } else {
        add.style.display = "none"
    }
}

补充注意事项 #

如果你的addPost初始显隐状态是通过CSS类设置（而非行内style属性声明display值），首次判断add.style.display会拿到空字符串，导致逻辑不符合预期，这种情况可以改为读取计算后样式：

function showPost(){
    let add = document.getElementById("addPost")
    const computedStyle = window.getComputedStyle(add)
    if (computedStyle.display === "none" ){
        add.style.display = "block"
    } else {
        add.style.display = "none"
    }
}

更推荐的做法是提前定义好控制隐藏的CSS类，通过切换类名实现显隐，可维护性更高：

.hidden {
    display: none !important;
}

function showPost(){
    let add = document.getElementById("addPost")
    add.classList.toggle('hidden')
}

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