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

Question

我在隱藏和顯示特定標簽時遇到了問題。 它們被設置為當前正在使用的登錄系統的登錄和注銷按鈕。 登錄和注銷工作完美。

隱藏登錄標記可以正常工作，並且在注銷后可以正確顯示。 但是，注銷標記不能說同樣的話。 在檢查實際頁面時，我看到它沒有得到任何CSS更改，好像它完全忽略了我的JavaScript。

所以這是我的帶有Javascript函數的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>";
        }
        }
    ?>

這是我的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

嘗試改為設置類的樣式，或使用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>";
}
}

？>

Answer 2

請嘗試以下操作：

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