Javascript document.getElementById CSS无法正常工作？

Question

Ive got a problem with hiding and showing a certain tag. They are made to be a login and logout button for a login system im currently making. Logging in and logging out works perfect.

Hiding the login tag works fine, and when logged out, it shows properly. However the same cannot be said with the logout tag. When inspecting the actual page, i see its not getting any CSS changes as if its ignoring my javascript entirely.

So heres my HTML with Javascript function:

<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>";
        }
        }
    ?>

And heres my 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

Try the following:

<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

Try to style classes instead, or use JQuery

With JQuery you can do something like:

$('#navigatieknop_inlog').hide()

Or using classes

$('.navigatieknop_inlog').hide()

or using 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>";
}
}

?>