document.getElementById设置visibility='hidden'失效，Firebase变量无法隐藏社交图标

我通过Firebase获取变量配置，原本逻辑是根据配置值将对应社交图标的visibility设为hidden，但实际所有社交图标都保持可见，代码未正常执行。

Firebase变量值 #

HTML代码 #

<html>
<div>
    <p>Follow us on social.</p>
    <a id="facebook" title="Facebook" href="https://www.facebook.com/LabateGroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Facebook.png" alt="">
    </a>
    <a id="instagram" title="Instagram" href="https://www.instagram.com/labategroup/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/Instagram.png" alt="">
    </a>
    <a id="linkedin" title="LinkedIn" href="https://www.linkedin.com/company/labate-group/" target="_blank">
        <img class="socialIcon" src="Social%20Media%20Icons/LinkedIn.png" alt="">
    </a>
</div>
</html>

CSS代码 #

a {
    visibility: visible;
}

a:hover {
    color: var(--primaryColor);
    transition: all .1s ease-in-out;
    transform: scale(1.1);
    visibility: visible;
}

JavaScript代码 #

let facebook = brand.socialMedia.facebook.url;
let instagram = brand.socialMedia.instagram.url;
let linkedin = brand.socialMedia.linkedin.url;

function showSocialIfExists(facebook, instagram, linkedin, twitter, tiktok, youtube) {
    if(facebook !== 'tomato.com') {
        document.getElementById("facebook").style.visibility = "hidden";
    } else { document.getElementById("facebook").style.visibility = "visible"; }

    if(typeof instagram === 'undefined') {
        document.getElementById("instagram").style.visibility="hidden";
    } else { document.getElementById("instagram").style.visibility="visible"; }

    if(typeof twitter === 'undefined') {
        document.getElementById("linkedin").style.visibility="hidden";
    } else { document.getElementById("linkedin").style.visibility="visible"; }
}

当前显示效果 #

目前不清楚还有哪些解决办法可以尝试。

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