HTML - Comment afficher « LOGIN » si le nom du membre du groupe est vide

Question

Fondamentalement, il serait super génial si quelqu'un peut fournir un pointeur sur la façon d'y parvenir. J'utilise un 3ème SAS et lorsqu'il y est connecté, il renvoie le nom d'utilisateur à class = "SFnam" qui peut être affiché sur n'importe quelle page ayant le JS associé en bas de la page.

Au moment où j'utilise le code html ci-dessous pour afficher les utilisateurs Nom en haut à droite de l'écran lorsque vous êtes connecté: à savoir « Connecté en tant que: BORIS SMITH », mais lorsqu'un utilisateur NOT pas identifié, il affiche « journalisé en tant que: ". Pas idéal.

Comment puis-je afficher « LOGIN » si la classe = « SFnam » est vide?

Voici ce que j'utilise (après l'entrée 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> 

Une fois connecté le résultat span est: < span class = "SFnam"> Boris Smith </span>

Une fois déconnecté, le résultat du span est: < span class = "SFnam"> </span>

Je suis assez nouveau pour cela, mais j'ai quelques compétences avec la codine de base g etc donc des excuses si le ci-dessus n'a pas été mal construit :(.

sera grandement appréciée Toute orientation/assistance.

Vive Boris

ÉDITÉE: A noter également le script d'écoute en bas de chaque page (pas sûr si cela aide ?:

<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> 

Answer 1

Cela va changer le texte de l'élément en conséquence à que span class contenant du texte ou non.

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(); 

    }); 

ajouter un identifiant à votre portée afin que nous puissions le localiser

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

mise à jour de votre script en bas avec cette

<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> 

Cela fera en sorte que la fonction est également mis à jour si des changements se produisent au cours du temps d'exécution. Voici un JSFiddle