JavaScript masquer menu

Eléphant du PHP | 72 Messages

22 oct. 2021, 06:49

Bonjour à tous,

Je rencontre un petit soucis en JS pour masquer mon menu sur certaine page.
Voici mon JS :

Code : Tout sélectionner

// Fonction pour faire disparaitre la navBar sur les pages connexion const navBarPerso = document.querySelector('#navBarPerso'); document.addEventListener('DOMContentLoaded', function() { var page = document.querySelector('.connexion'); if (page){ navBarPerso.classList.add("d-none"); } })
Pour moi le code doit masquer ma div avec id #navBarPerso quand la variable page = connexion ($page = "connexion");)
or actuellement ma navbar est tout le temps en d-none donc invisible

Voici une page que je veux que la navBar soit masquer :

Code : Tout sélectionner

$content = ob_get_clean(); $titlePage = 'Bienvenue'; $metaDescription =""; $metaKeywords =""; $title = 'Bienvenue'; $css = ''; $page = 'connexion'; include(dirname(__FILE__).'/templates/template.php'); ?>
et une autre ou je veux que la navbar apparait :

Code : Tout sélectionner

<?php $content = ob_get_clean(); $titlePage = 'Connecter'; $metaDescription =""; $metaKeywords =""; $css =""; $title = 'Connecter'; include(dirname(__FILE__).'/templates/template.php'); ?>
En espérant être clair dans mon explication.

@+Filou

Mammouth du PHP | 1990 Messages

22 oct. 2021, 13:10

quel est le code html de la page dans laquelle le code
var page = document.querySelector('.connexion');
s’exécute ?

Eléphant du PHP | 72 Messages

22 oct. 2021, 18:21

dans cette page là :
<?php
ob_start();
?>

<div class="container">
<div class="row justify-content-center my-5">
<div class="col-10">
<img src="/../publics/imgs/barreInscriptionConnexion.png" class="img-fluid test" alt="Responsive image">
</div>
</div>
</div>

<!-- Debut code message erreur -->
<div class="container">
<div class="row justify-content-center my-5">
<?php if($code) :?>
<div class="col-10 text-center h5 alert mt-3 <?= $messageCode[$code]['type'] ?>">
<?= $messageCode[$code]['msg'] ?>
</div>
<?php endif ?>
</div>
</div>
<!-- Fin code message erreur -->

<!-- Connexion / Inscription -->

<div class="container">
<div class="row justify-content-center my-5">

<!-- Connexion -->
<div class="col-10 col-lg-4 connexion pt-1 mb-5">
<h6>-> Connexion</h6>
<form action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post">
<div class="col-8 input-group mb-3">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
</div>
<input type="email" class="persoConnexionInscription form-control" placeholder="Mail*" name="mailConnexion" id="mailConnexion" required>
<div class="error"><?= htmlentities($error['mailConnexion'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
</div>

<div class="col-8 input-group mb-3">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
</div>
<input type="password" class="persoConnexionInscription form-control" placeholder="Mot de passe*" name="mdpConnexion" required>
<div class="error"><?= htmlentities($error['mdpConnexion'] ?? '', ENT_QUOTES, 'UTF-8')?></div>
</div>

<div class="d-flex justify-content-end">
<p><a id="link" href="#">Mot de passe oublié ?</a></p>
</div>

<div class="text-center mb-3"><button type="submit" name="validation" value="1" class="btn btn-outline-light">Connexion</button></div>

</form>

<div class="d-flex justify-content-start">
<p>* Champs obligatoire</p>
</div>

</div>

<!-- Séparateur -->
<div class="col-10 col-lg-2"></div>

<!-- Inscription -->
<div class="col-10 col-lg-4 connexion pt-1 mb-5">
<h6>+ Inscription</h6>
<form action="<?=htmlspecialchars($_SERVER['PHP_SELF'])?>" method="post" enctype="multipart/form-data">
<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
</div>
<input type="email"
class="persoConnexionInscription form-control"
placeholder="Mail*"
name="mailInscription"
id="mailInscription"
value="<?= htmlentities($_POST['mailInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
</div>
<div class="error mb-3"><?= htmlentities($error['mailInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
</div>
<input type="email"
class="persoConnexionInscription form-control"
placeholder="Confirmation*"
name="mailconfirmationInscription"
id="mailconfirmationInscription"
value="<?= htmlentities($_POST['mailconfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
</div>
<div class="error mb-3"><?= htmlentities($error['mailconfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
</div>
<input type="text"
class="persoConnexionInscription form-control"
placeholder="Pseudo* (chiffre et lettre)"
pattern="<?=REGEX_NUMBER_AND_LETTER?>"
minlength="2"
maxlength="20"
name="pseudo"
id="pseudo"
value="<?= htmlentities($_POST['pseudo'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
</div>
<div class="error mb-3"><?= htmlentities($error['pseudo'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
</div>
<input type="password"
class="persoConnexionInscription form-control"
placeholder="Mot de passe*"
minlength="6"
maxlength="20"
name="mdpInscription"
id="mdpInscription"
value="<?= htmlentities($_POST['mdpInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
</div>
<div class="error mb-3"><?= htmlentities($error['mdpInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="col-8 input-group">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
</div>
<input type="password"
class="persoConnexionInscription form-control"
placeholder="Confirmation*"
minlength="6"
maxlength="20"
name="mdpConfirmationInscription"
id="mdpConfirmationInscription"
value="<?= htmlentities($_POST['mdpConfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?>"
required>
</div>
<div class="error mb-3"><?= htmlentities($error['mdpConfirmationInscription'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="col-8 input-group mb-3">
<div class="input-group-text iconesConnexionInscription">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-bounding-box" viewBox="0 0 16 16">
<path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5z"/>
<path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
</div>
<input type="file"
class="form-control"
name="avatar"
id="avatar"
value="<?= htmlentities($_POST['avatar'] ?? '', ENT_QUOTES, 'UTF-8')?>"/>
</div>
<div class="error mb-3"><?= htmlentities($error['avatar'] ?? '', ENT_QUOTES, 'UTF-8')?></div>

<div class="text-center mb-3"><button type="submit" name="validation" value="2" class="btn btn-outline-light">Enregistrement</button></div>
</form>

<div class="d-flex justify-content-start">
<p>* Champs obligatoire</p>
</div>

</div>

</div>
</div>


<?php
$content = ob_get_clean();

$titlePage = 'Connexion / Inscription';
$metaDescription ="";
$metaKeywords ="";
$title = 'Connexion / Inscription';
$css = 'connexion';
$page = 'connexion';


include(dirname(__FILE__).'/templates/template.php');
?>

Mammouth du PHP | 907 Messages

12 nov. 2021, 15:20

Je penses que tu devrais demander combien il existe de div qui ont la class ".connexion", et pas seulement si "page" existe:

de:

Code : Tout sélectionner

if (page){
à

Code : Tout sélectionner

if (page.length==1){