Fonction JS auto-invoquée
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
-
Bonjour,
(function changeVisibility(){ // code })()Essaie avec les () en fin de bloc
Source : https://www.w3schools.com/js/js_function_iife.asp
-
Bonjour,
Test non concluant. C'est pareil. Pas d'affichage des div ;-(
Merci quand même.Daniel
-
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
-
-
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
-
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