Javascript document.getElementById CSSが動作していませんか？

Question

Iveは、特定のタグを隠して表示する際に問題が発生しました。現在作成中のログインシステムのログインとログアウトボタンになります。ログインとログアウトは完璧に機能します。

ログインタグを非表示にすると正常に動作し、ログアウトすると正しく表示されます。しかし、これはログアウトタグでは言えません。実際のページを調べると、私のJavaScriptが完全に無視されているかのように、CSSの変更がないことがわかります。

JavaScriptの機能を持つので、HERESに私のHTML：

<div class="uitlog_inlog"> 
    <a href="login.php" class="navigatieknop_inlog" id="navigatieknop_inlog">Inloggen</a> 
    <a href="loguit.php" class="navigatieknop_uitlog" id="navigatieknop_uitlog">Uitloggen</a> 
    </div> 
    <?php 

     include 'login/inloggen.php'; 
     if(!isset($_SESSION['loggedin']) ==true){ 
      $sessie = session_status(); 
      if($sessie == PHP_SESSION_NONE){ 
       session_start(); 
      } else { 
      } 
     } 

     if(session_status() == PHP_SESSION_ACTIVE){ 
      if(isset($_SESSION['login_user'])){ 
      echo '<div class="welkom">Welkom ' .$_SESSION['login_user'] .'!</div>'; 
       echo "<script type=\"text/javascript\"> 
         document.getElementById('navigatieknop_inlog').style.display = 'none'; 
         document.getElementById('registratieknop').style.display = 'none'; 
         document.getElementById('bewerken').style.display = 'block'; 
         document.getElementById('navigatieknop_uitlog').style.display = 'block'; 
         </script>"; 

     } else { 
      echo "<script type=\"text/javascript\"> 
         document.getElementById('navigatieknop_inlog').style.display = 'block'; 
         document.getElementById('registratieknop').style.display = 'block'; 
         document.getElementById('bewerken').style.display = 'none'; 
         document.getElementById('navigatieknop_uitlog').style.display = 'none'; 
         </script>"; 
     } 
     } 
    ?> 

そしてHERESに私のCSS：

 .navigatieknop_uitlog, .navigatieknop_inlog { 
    border: none; 
    color: white; 
    padding: 10px 15px; 
    text-align: center; 
    text-decoration: none; 
    float: right; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

    .navigatieknop:hover, .navigatieknop_end:hover, .navigatieknop_uitlog:hover, .navigatieknop_inlog:hover, .registratieknop:hover, .bewerkenknop:hover{ 
    background-color: black; 
    -webkit-transition: background-color 500ms linear; 
    -moz-transition: background-color 500ms linear; 
    transition: background-color 500ms linear; 
} 

Answer 1

次のことを試してみてください？

<div class="uitlog_inlog"> 
    <a href="login.php" class="navigatieknop_inlog" id="navigatieknop_inlog">Inloggen</a> 
    <a href="loguit.php" class="navigatieknop_uitlog" id="navigatieknop_uitlog">Uitloggen</a> 
</div> 
<?php 

    include 'login/inloggen.php'; 
    if(!isset($_SESSION['loggedin']) ==true){ 
    $sessie = session_status(); 
    if($sessie == PHP_SESSION_NONE){ 
     session_start(); 
    } else { 
    } 
    } 

    if(session_status() == PHP_SESSION_ACTIVE){ 
    if(isset($_SESSION['login_user'])){ 
     echo '<div class="welkom">Welkom ' .$_SESSION['login_user'] .'!</div>'; 
     echo "<script type=\"text/javascript\"> 
       (function() { 
       document.getElementById('navigatieknop_inlog').style.display = 'none'; 
       document.getElementById('navigatieknop_uitlog').style.display = 'block'; 
       //document.getElementById('registratieknop').style.display = 'none'; 
       //document.getElementById('bewerken').style.display = 'block'; 
       })(); 
      </script>"; 
    } else { 
     echo "<script type=\"text/javascript\"> 
       (function() { 
        document.getElementById('navigatieknop_inlog').style.display = 'block'; 
        document.getElementById('navigatieknop_uitlog').style.display = 'none'; 
        //document.getElementById('registratieknop').style.display = 'block'; 
        //document.getElementById('bewerken').style.display = 'none'; 
        })(); 
       </script>"; 
    } 
    } 
?> 

Answer 2

ではなく、スタイルクラスを試してみてください、またはあなたが何かを行うことができますjQueryを使ってjQueryの

を使用like：

$('#navigatieknop_inlog').hide() 

または使用するクラス

$('.navigatieknop_inlog').hide() 

または使用してPHP

<div class="uitlog_inlog"> 

<?php 
$_SESSION['loggedin'] = true; 
var_dump($_SESSION['loggedin']); 
if(!checkLoginStatus()){ 
?> 
    <a href="login.php" class="navigatieknop_inlog" id="navigatieknop_inlog">Login</a> 
<?php } 

elseif(checkLoginStatus()){ ?> 
    <a href="loguit.php" class="navigatieknop_uitlog" id="navigatieknop_uitlog">Logout</a> 
<?php } ?> 
</div> 

<?php 

// include 'login/inloggen.php'; 

function checkLoginStatus(){ 
    if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === false) { 
     return false; 
    } 
    else { 
     return true; 
    } 
}   

if(!isset($_SESSION['loggedin']) ==true){ 
    $sessie = session_status(); 
    if($sessie == PHP_SESSION_NONE){ 
     session_start(); 
    } else { 
    } 
} 

if(session_status() == PHP_SESSION_ACTIVE){ 
    if(isset($_SESSION['login_user'])){ 
    echo '<div class="welkom">Welkom ' .$_SESSION['login_user'] .'!</div>'; 
     echo "<script type=\"text/javascript\"> 
       document.getElementById('navigatieknop_inlog').style.display = 'none'; 
       document.getElementById('registratieknop').style.display = 'none'; 
       document.getElementById('bewerken').style.display = 'block'; 
       document.getElementById('navigatieknop_uitlog').style.display = 'block'; 
       </script>"; 

} else { 
    echo "<script type=\"text/javascript\"> 
       document.getElementById('navigatieknop_inlog').style.display = 'block'; 
       document.getElementById('registratieknop').style.display = 'block'; 
       document.getElementById('bewerken').style.display = 'none'; 
       document.getElementById('navigatieknop_uitlog').style.display = 'none'; 
       </script>"; 
} 
} 

>