Javascript document.getElementById CSS не работает?

Question

У меня возникла проблема со скрытием и показом определенного тега. Они сделаны для входа и выхода из системы для системы входа в систему, которую они в настоящее время делают. Вход в систему и выход из системы отлично работают.

Скрытие тега входа работает нормально, и при выходе из системы оно отображается правильно. Однако то же самое нельзя сказать с тегом выхода. При проверке фактической страницы я вижу, что она не получает никаких изменений CSS, как будто она полностью игнорирует мой JavaScript.

Так Heres мой HTML с функцией Javascript:

<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 вы можете сделать что-то например:

$('#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>"; 
} 
} 

>