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

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条)

报告相同问题?

悬赏问题

  • ¥15 依据报错在原代吗格式的基础上解决问题
  • ¥15 在虚拟机中安装flash code
  • ¥15 单片机stm32f10x编写光敏电阻调节3.3伏大功率灯亮度(光强越大灯越暗,白天正常光强灯不亮,使用ADC,PWM等模块)望各位找一下错误或者提供一个可实现功能的代码
  • ¥20 verilog状态机方法流水灯
  • ¥15 pandas代码实现不了意图
  • ¥15 GD32H7 从存储器到外设SPI传输数据无法重复启用DMA
  • ¥25 LT码在高斯信道下的误码率仿真
  • ¥45 渲染完成之后将物体的材质贴图改变,自动化进行这个操作
  • ¥15 yolov5目标检测并显示目标出现的时间或视频帧
  • ¥15 电视版的优酷可以设置电影连续播放吗?