HTML-如果成员名称类为空，如何显示“登录”

基本上，如果有人能提供一个如何实现这一点的指针，那将是非常棒的

我使用第三个SAS，当登录到它时，它会将用户名返回到class=SFnam，该用户名可以显示在页面底部嵌入了相关JS的任何页面上

目前，我使用以下html在登录时在屏幕的右上角显示用户名：即登录身份：BORIS SMITH，但当未登录的用户显示登录身份：。不理想

如果class=SFnam为空，如何显示LOGIN

以下是我在Rafaels输入后使用的内容：

 <script type="text/javascript">
 window.addEventListener("DOMContentLoaded", function(event) {
    var spanElm = document.getElementById('myspan');

    if(spanElm.classList.contains('SFnam'))
    {
          console.log('here');
    }
    else
    {
        console.log('here instead');
        document.getElementsByTagName('user')[0].innerHTML = "LOGIN";
    }
});
 </script>
 <style>
 #loginwrapper {
    margin: 0px 0px 0px Opx;
    border: none;
    cursor: pointer;
 }
 .logincontainer {  text-align: right;}
 user {
    display: inline-flex;
    background-color: #1f7665; color: #fff;
    padding:2px 3px 1px 3px;
    font-size:8px;
    margin-right: 10px;
    border-radius: 3px;
    font-family: Raleway, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
 }
 </style>
 <div id="loginwrapper" title ="Click to Log in/out" onclick="window.open('/member-login.html','_self')">
    <div class="logincontainer">
            <user>Logged in as:&nbsp; <b><span style="text-transform:uppercase;" class="SFnam" id='myspan'></span></b>
    </div>
 </div>

登录时，span结果为： 鲍里斯·史密斯

注销时，范围结果为：

我对此相当陌生，但有一些基本的编码等技能，因此，如果上述内容没有构建得很差，我深表歉意：

如有任何指导/协助，将不胜感激

干杯 鲍里斯

编辑： 另外值得注意的是，每页底部的侦听器脚本不确定这是否有帮助：

 <script>(function(){var i,j,a,x;try{x=localStorage.getItem("SF_nam");}catch(e){x="";}
 try{for(a=document.querySelectorAll(".SFnam"),i=a.length-1;i>=0;i--)a[i].innerHTML=x?x:"";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_li"),i=a.length-1;i>=0;i--)a[i].style.display=x?"":"none";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_lo"),i=a.length-1;i>=0;i--)a[i].style.display=x?"none":"";}catch(e){}})();
 </script>

---

这将根据是否包含文本的span类相应地更改元素的文本

function updateSpan()
{
     var spanElm = document.getElementById('myspan');
        if(spanElm.innerHTML)
        {
              document.getElementsByTagName('user')[0].innerHTML = "Logged in as " + spanElm.innerHTML;
        }
        else
        {

            document.getElementsByTagName('user')[0].innerHTML = "LOGIN";
        }
}

window.addEventListener("DOMContentLoaded", function(event) {
        updateSpan();

    });

将id添加到您的范围，以便我们可以找到它

<span style="text-transform:uppercase;"class="SFnam" id='myspan'></span>

使用以下命令更新底部脚本

<script>(function(){var i,j,a,x;try{x=localStorage.getItem("SF_nam");}catch(e){x="";}
 try{for(a=document.querySelectorAll(".SFnam"),i=a.length-1;i>=0;i--)a[i].innerHTML=x?x:"";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_li"),i=a.length-1;i>=0;i--)a[i].style.display=x?"":"none";}catch(e){}
 try{for(a=document.querySelectorAll(".SF_lo"),i=a.length-1;i>=0;i--)a[i].style.display=x?"none":"";}catch(e){}
updateSpan()})();
 </script>

这将确保在执行期间发生更改时也会更新函数。

---

这里有一个

感谢Rafael的快速响应！太神了我完全按照您概述的方式实现了上述内容，但是当注销时，文本logginas:仍然存在。它在登录名：和登录名：Boris Smith之间确实发生了更改，但是登录名不会显示，而不是登录名：？不确定我是否做错了什么？也许SFnam不是真的空的？登录/注销时查看控制台中的结果，注销时范围显示为空，因此我不确定。我可以重新发布我的代码吗？请使用浏览器检查器找到您的span，并查看您登录和未登录时的情况。如果可以，发布两种情况下的确切外观，编辑问题并包含这些详细信息。我已经用您的建议更新了代码，发布了FF中显示的span结果，并添加了第三方提供的侦听器脚本，因为可能可以更改？谢谢Rafael！已实施且有效。。。有点登录/注销时，显示文本的状态不会像以前那样动态更改，但页面刷新时会显示正确的结果。这与登录和注销相同。以前，只要我登录/注销，结果将立即生效，无需任何页面刷新。此外，在修复过程中，文本转换：大写不起作用，用户名保持正确的大小写？