2017-02-23 130 views
0

У меня возникла проблема со скрытием и показом определенного тега. Они сделаны для входа и выхода из системы для системы входа в систему, которую они в настоящее время делают. Вход в систему и выход из системы отлично работают.Javascript document.getElementById CSS не работает?

Скрытие тега входа работает нормально, и при выходе из системы оно отображается правильно. Однако то же самое нельзя сказать с тегом выхода. При проверке фактической страницы я вижу, что она не получает никаких изменений CSS, как будто она полностью игнорирует мой JavaScript.

Так Heres мой HTML с функцией Javascript:

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

И Heres мой 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; 
} 
+0

Javascript работает. Возможно, эхо PHP печатает что-то неправильно? – Roy

+0

Не парень PHP, поэтому не уверен, но это не PHP скриптовый язык. Так будет ли этот сценарий не запускаться до того, как будут отображены элементы? Попробуйте создать JS-функцию и назовите ее на 'window.onload' – Rajesh

+0

@Rajesh PHP. Запустите сценарий. Вход «кнопка» также находится там, и он скрывается и показывает штраф штрафа. Я даже дошел до того, как скопировал код из рабочей кнопки входа и изменил его на кнопку выхода. К несчастью, как-то это не сработало. – Asbuster

ответ

0

Попробуйте следующее:

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

Это работает! Кнопка входа в систему отображается хорошо, когда вы не вошли в систему, и при входе в систему отображается кнопка выхода из системы! Спасибо чувак! Так что все, что мне нужно было сделать, это поместить функцию внутри скрипта. – Asbuster

+0

Фу! Были некоторые проблемы, отправляющие код. Можете ли вы убедиться, что отредактированный код работает тоже? Да, так оно и должно делать вещи только при загрузке страниц, а вторая возможная проблема заключалась в том, что некоторые из элементов get по идентификатору терпели неудачу. – uautkarsh

+0

Ваш отредактированный код отлично работает. Что вы изменили? – Asbuster

0

Попробуйте классы по стилю вместо, или использовать 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>"; 
} 
} 

>

+0

См. Разметку. OP использует то же значение, что и класс, и ID – Rajesh

+0

Это сообщение было опубликовано как ответ, но оно не пытается ответить на вопрос. Это должно быть редактирование, комментарий, другой вопрос или вообще исключить. –

+0

@ ZakariaAcharki Пользователь не имеет достаточного количества, чтобы добавить комментарий – Rajesh