HTML - メンバー名CLASSが空の場合に "LOGIN"を表示する方法

Question

基本的に、これを達成するための方法を指し示すことができれば、大変素晴らしいと思います。

3番目の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> 

スパン結果にログインすると次のとおりです。 <スパンクラス= "SFnam">ボリス・スミス</span>の

ログアウトすると、スパンの結果は次のようになります。 < span class = "SFnam"> </span>

これはかなり新しいですが、基本的なコードgなど上記のことがうまく構築されていない場合は謝罪:(。

ご指導いただきありがとうございます。

乾杯 ボリス

EDITED：それは場合に役立ちます？：

<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

これは、に応じて要素のテキストを変更します。また、ノートの はわからない各ページ（の下部にあるリスナーのスクリプトですテキストやないを含むことスパンクラス。

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> 

であなたの一番下のスクリプトを更新します。 ここをクリックJSFiddle