douke1942
2017-02-23 09:36
浏览 103

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

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;
}
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douzhang6646 2017-02-23 10:07
    已采纳

    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>";
        }
      }
    ?>
    
    点赞 打赏 评论
  • douji8549 2017-02-23 09:42

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

    ?>

    点赞 打赏 评论

相关推荐 更多相似问题