11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Où est l'erreur ?

Bonjour Gili,

Et ça, c'est pas du javascript ?
<script>
     function myFunction() {}                                               
          document.getElementById("ok").style.visibility= 'hidden' ; 
     }
  </script>

Modifié par fredericmarcel (08 Dec 2015 - 17:38)
Qu'est ce qui manque ?
Je ne poserai plus de question si c'est pour recevoir de telles réponses.
C'est déjà dur d'essayer de maitriser les outils. Smiley fache
Modifié par fredericmarcel (08 Dec 2015 - 18:36)
L'évènement est dans le bouton ssubmit" : onclick = "myFunction"

²<div>
    <textarea id="zonetexte" placeholder="Ecrivez votre texte" autofocus></textarea>
    <input id="ok" type="submit" name="submit" value="ok"  onclick= "myFunction()">       
  </div>




     function myFunction() {}                                               
          document.getElementById("ok").style.visibility= 'hidden' ; 
     }

Modifié par fredericmarcel (08 Dec 2015 - 19:55)
Modérateur
Bonjour,

Ton fiddle fonctionne, à condition de cliquer sur Javascript > Load type = No wrap in Head.
Modérateur
Le dernier fiddle que tu viens d'envoyer ne contient aucun code dans la partie Javascript. Je te recommande de faire tes derniers tests avec une vraie page Web en ligne.
fredericmarcel a écrit :
Pour moi, mon fiddle ne marche pas : le bouton de devient pas "hidden" quand on clique dessus.

Dans le premier jsfiddle il y a des balises scripts qui ne devrait pas être dans le fichier, dans le deuxième exemple il n'y a tout bonnement pas de script...

Un exemple online qui fonctionne : CodePen
Merci Olivier : ça marche.
Peux-tu me donner un lien vers un tuto pour comprendre ton code js qui est vraiment très différent du mien ? Il a l'air vraiment très élégant et concentré.
J'aimerais bien le comprendre pour l'utiliser dans tous les cas similaires.
Modérateur
Bonjour,

Le problème quand on teste dans jsfidle est qu'il faut faire attention à la valeur du paramètre "LOAD TYPE" de javascript (présentement on a le choix entre "onLoad", "onDomready", "No wrap - in <head>, "No - wrap in <body>"). Ça se modifie présentement en cliquant sur le bouton "javascript" en haut à droite de la fenêtre du code javascript dans l'interface jsfidle.

Si on utilise "onLoad" ou "onDomready", jsfidle va encapsuler le code javascript qu'on lui fournit dans un fonction (puisqu'il va devoir exécuter ce code en différé une fois que la page sera chargée ou que le Dom sera prêt). Du coup, ce qu'on y déclare peut ne pas être vu par toute la page suivant la manière dont on le déclare. En particulier si on y déclare une fonction avec ...
function myFunction() {...}
... cette fonction sera utilisable dans notre code javascript mais pas ailleurs dans le html. Si par contre on déclare la fonction en utilisant la syntaxe ... 
myFunction=function(){...};
... myFunction sera "visible" partout dans la page. Notez que si on utiilise ... 
var myFunction=function(){...};
... on retombe dans le même problème, à savoir que myFonction ne sera pas connue ailleurs que dans notre code javascript, du fait que l'emploie du mot clé "var" va rendre myFunction connue uniquement dans la fonction d'encapsulement de jsfidle.

Si on utilise "No wrap - in <head>" ou "No wrap - in <body>", jsfidle insérera le code javascript qu'on lui fournit dans la partie <head> ou <body> de la page sans l'encapsuler dans une fonction. Du coup la déclaration ... 
function myFunction() {...}
... suffira pour que myFonction soit connue partout dans la page. Notez que les autres déclarations fonctionneront aussi.

Comme dans l'exemple qu'on souhaite tester, on avait d'une part le "LOAD TYPE" valant onLoad, et d'autre part une syntaxe de déclaration de la fonction du type ... 
function myFunction() {...}
... lorsque l'on cliquait sur le bouton "OK", myFunction ne pouvait pas être trouvée et déclenchée.

Voici donc une version qui fonctionne quelque soit la valeur de "LOAD TYPE" dans jsfidle :


<div>
    <textarea id="zonetexte" placeholder="Ecrivez votre texte" autofocus></textarea>
    <input id="ok" type="submit" name="submit" value="ok" onclick="myFunction();">       
</div>




<script>
myFunction= function()
{
    document.getElementById("ok").style.visibility= 'hidden';
};
</script>


Une autre option, vous l'aurez sans doute compris, est de changer la valeur du "LOAD TYPE" de jsfidle à "No wrap in Head" comme l'a déjà suggéré Tony Monast ou "No wrap in Body".

Voilà, voilà !

Amicalement,
Modifié par parsimonhi (09 Dec 2015 - 00:09)
fredericmarcel a écrit :
Merci Olivier : ça marche.
Peux-tu me donner un lien vers un tuto pour comprendre ton code js qui est vraiment très différent du mien ? Il a l'air vraiment très élégant et concentré.
J'aimerais bien le comprendre pour l'utiliser dans tous les cas similaires.

La solution de parsimonhi est en js pur (Vanilla js), ma solution nécessite le chargement de la lib' jQuery.

Donc :
$(document).on('click', '.button', function() { // Si click sur un élément de la classe .button, alors function()
	$(this).addClass('hidden'); // ajout d'une classe .hidden sur l'élément objet de l'attention (donc ici la classe .button). Ce qui nécessite donc de spécifier un display:none pour la classe .hidden dans le css.
	// $(this).fadeOut(); // Solution full jQuery (sans besoin d'avoir recours au css) alternative à la précédente : l'élément disparait avec un fondu (qui par défaut est de 300ms).
});
Sujet clos
Aller à