Fonction JS auto-invoquée

danielos77 Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   -

Bonjour,

Je cherche à partir d'un résultat reçu et du traitement de ce résultat en php, je souhaiterais afficher ou pas 2 div. au chargement de la page.
En mettant un bouton  avec OnClick..  et le script JS entre les balises <head< et </head> cela fonctionne très bien. Mais impossible d'auto-invoquer le script dans mon if. 
 

<?php     
//echo 'Test <br>';
//On vérifie qu'un choix inscription ou renouvellement a bien été fait
$_POST['Inscript_Renouv'] = (isset($_POST['Inscript_Renouv'])) ? $_POST['Inscript_Renouv'] : NULL;
//echo $_POST['Inscript_Renouv'].'<br>';

if ($_POST['Inscript_Renouv'] == "Inscription" OR $_POST['Inscript_Renouv'] == "Renouvellement")
{
}
    if ($_POST['Inscript_Renouv'] == "Renouvellement" and $_POST['NumAdh'] != "")
    {
       //On récupère proprement le N° Adhérent saisi, NULL si absent
       $_POST['NumAdh'] = (isset($_POST['NumAdh'])) ? $_POST['NumAdh'] : NULL;
       // On affecte la valeur reçue à la variable 
       $NumAdh=$_POST['NumAdh'];
       echo 'N° Adhérent : '.$NumAdh.'<br>';

    echo'<script type="text/javascript">
    (function changeVisibility(){
        if(document.getElementById("Informations").style.visibility!="hidden"){
        document.getElementById("Informations").style.visibility="hidden"
        document.getElementById("Informations").style.display="none"
        }else{
        document.getElementById("Informations").style.visibility="visible"
        document.getElementById("Informations").style.display="block"
        document.getElementById("HelloAsso").style.visibility="visible"
        document.getElementById("HelloAsso").style.display="block"
        }
    })
    </script>';
    }
    elseif($_POST['Inscript_Renouv'] == "Inscription")
    {
       echo 'Bienvenue sur cette page pour créer votre inscription au club.<br>';
    ?>    
        <script type="text/javascript"> alert('hoho \nCe serait bien d\'afficher les div aussi maintenant ! '); </script>
    <?php
    }
    else
    {
        echo 'ATTENTION à vos saisies ! Recommencez SVP';
    }
?>	



<!----------------------------------
    INSCRIPTION PROPREMENT DITE 
------------------------------------>

<form method="post" action="EnvoiInscription.php" > 

<div id="Informations" style="visibility:hidden;display:none;">

blabla

	<!-- affichage pour sauvegarder les saisies et les envoyer -->
    <input type="submit" name="Validation" style="font-size:12px;margin-left: 100px;" value="Enregistrer ces données " onclick="HasClicked();return false;"/><br>

<script type="text/javascript">
function HasClicked()
{
    alert('Données bien enregistrées !\n\nVous pouvez procéder au règlement de votre adhésion');
}
</script>

</div>

</form>

<!---------------------------------
   PAIEMENT
---------------------------------->

<div id="HelloAsso" style="visibility:hidden;display:none;">
    
blablabla

</div>

Merci à celle ou celui qui pourra m'indiquer une piste.
Daniel


Windows / Firefox 152.0

4 réponses

  1. danielos77 Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   2
     

    Bonjour,

    Test non concluant. C'est pareil. Pas d'affichage des div ;-(
    Merci quand même.

    Daniel
     

    0
    1. Grandasse_ Messages postés 967 Date d'inscription   Statut Membre Dernière intervention   611
       

      Zut, j'ai une autre idée : 

      <script type="text/javascript" defer>

      Ajoute "defer" à la fin de la balise qui contient ton script, ça permet d'attendre que le HTML soit chargé (et donc que les différents éléments qui sont appelés par le JS existent dans le document)

      https://developer.mozilla.org/fr/docs/Web/API/HTMLScriptElement/defer

      0
  2. danielos77 Messages postés 109 Date d'inscription   Statut Membre Dernière intervention   2
     

    Bonjour,

    Idem, les div ne s'affichent toujours pas quand la condition est bonne.

    L'auto-invocation fonctionne car lorsque je mets un alert avant le if du JS, il s'affiche.
    J'ai l'impression qu'on ne peut auto-invoquer n'importe quelle fonction. Par ex une fonction qui contiendrait une condition faisant intervenir un élément extérieur.

    Merci tout de même.

    Daniel

    0
  3. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 830
     

    Bonjour,

    J'ai regardé en diagonale vos échanges, mais je pense qu'il faut attendre que tes éléments soient chargés dans ta page pour pouvoir les manipuler.

    Il existe plusieurs solutions (defer n'en est pas une car elle s'applique uniquement aux éléments contenants un src= )

    Donc, essaye :

    echo '<script>
    document.addEventListener("DOMContentLoaded", function (){
        const informations = document.getElementById("Informations");
        const helloAsso = document.getElementById("HelloAsso");
    
        if (!informations || !helloAsso) {
            return;
        }
    
        if (informations.style.visibility !== "hidden") {
            informations.style.visibility = "hidden";
            informations.style.display = "none";
        } else {
            informations.style.visibility = "visible";
            informations.style.display = "block";
            helloAsso.style.visibility = "visible";
            helloAsso.style.display = "block";
        }
    });
    </script>';

    Et si ça ne marche toujours pas, ajoute des console.log  dans le code js et montre nous ce que ça t'affiche dans la console de ton navigateur 


    0