douke1942 2017-02-23 09:36
浏览 145
已采纳

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>";
        }
      }
    ?>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥50 如何完美解决谷歌礼品卡支付不被检测
  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统
  • ¥15 Multisim仿真设计地铁到站提醒电路
  • ¥15 怎么用一个500W电源给5台60W的电脑供电
  • ¥15 请推荐一个轻量级规则引擎,配合流程引擎使用,规则引擎负责判断出符合规则的流程引擎模板id