Auto-invoked JS function

Resuelto
danielos77 Mensajes publicados 115 Fecha de registro   Estado Miembro Última intervención   -  
jordane45 Mensajes publicados 30427 Fecha de registro   Estado Moderador Última intervención   -

Hola,

Estoy buscando a partir de un resultado recibido y su tratamiento en PHP, me gustaría mostrar u ocultar 2 div al cargar la página. Poniendo un botón con OnClick.. y el script JS entre las etiquetas <head< y </head> funciona muy bien. Pero es imposible invocar automáticamente el script dentro de mi if.

<?php //echo 'Test <br>'; //Comprobamos que se haya hecho una elección de inscripción o renovación $_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'] != "") { //Obtenemos correctamente el Nº de Adhérent introducido, NULL si está ausente $_POST['NumAdh'] = (isset($_POST['NumAdh'])) ? $_POST['NumAdh'] : NULL; // Asignamos el valor recibido a 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 'Bienvenido a esta página para crear su inscripción al club.<br>'; ?> <script type="text/javascript"> alert('hoho \n¡Sería buena idea mostrar también ahora las divs! '); </script> <?php } else { echo 'ATENCIÓN a sus entradas! Reintente por favor'; } ?> <!---------------------------------- INSCRIPCIÓN DICHA CON CELERIDAD ------------------------------------> <form method="post" action="EnvoiInscription.php" > <div id="Informations" style="visibility:hidden;display:none;"> blabla <!-- muestra para guardar las entradas y enviarlas --> <input type="submit" name="Validation" style="font-size:12px;margin-left: 100px;" value="Guardar estos datos " onclick="HasClicked();return false;"/><br> <script type="text/javascript"> function HasClicked() { alert('Datos bien guardados !\n\n¡Puedes proceder al pago de tu adhesión!'); } </script> </div> </form> <!--------------------------------- PAGO ----------------------------------> <div id="HelloAsso" style="visibility:hidden;display:none;"> blablabla </div> 

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


4 respuestas

  1. jordane45 Mensajes publicados 30427 Fecha de registro   Estado Moderador Última intervención   4 833
     

    Hola,

    He mirado de forma general tus intercambios, pero creo que hay que esperar a que tus elementos se carguen en tu página para poder manipularlos.

    Existen varias soluciones (defer no es una solución porque solo se aplica a los elementos que contienen un src= )

    Entonces, prueba:

    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 fonctionne toujours pas, ajoute des console.log dans le code js et montre-nous ce que cela t’affiche dans la console de ton navigateur


    .
    Cordialement,
    Jordane

    1
  2. danielos77 Mensajes publicados 115 Fecha de registro   Estado Miembro Última intervención   2
     

    Hola,

    Prueba no concluyente. Es igual. No hay visualización de las div ;-(
    Gracias de todos modos.

    Daniel

    0
    1. Grandasse_ Mensajes publicados 981 Fecha de registro   Estado Miembro Última intervención   618
       

      Vaya, tengo otra idea:

      <script type="text/javascript" defer>

      Añade "defer" al final de la etiqueta que contiene tu script, eso permite esperar a que se cargue el HTML (y por lo tanto que existan en el documento los distintos elementos que son llamados por el JS)

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

      0
  3. danielos77 Mensajes publicados 115 Fecha de registro   Estado Miembro Última intervención   2
     

    Hola,

    Idem, las div no se muestran aún cuando la condición es correcta.
    Gracias de todos modos.

    Daniel

    0