Maitriser jsbin et les éditeurs de code HTML CSS JS separément

Bonjour a tous
ma question va vous parraitre idiote mais ca me pose aucun probleme

j'essaie de comprendre comment fonctionne jsbin afin de m'en servir d'editeur de code je ne sais pas si c'est la solution mais en attendant ca aide
par contre si je separe le CSS et Javscript dans les editeur prevu a cet effet dans jsbin mon code ne fonctionne plus
si je met tout dans les balise respective dans la partie HTML ca fonctionne
quelqu'un sait ce qu'il faut faire ?

https://jsbin.com/yipenejexe/edit?html,css,js,output

Salut,

Oui moi aussi j'aime bien JSBin même si il manque des choses (il faudrait un JSBin++).

Pour ta question essai ça : https://jsbin.com/jiheditawe/edit?html,js,output... J'ai elevé <script>ajoute();</script> et mis ajoute(); dans le panel JS à la fin du code...

PS : Ah ils sont beaux tes sliders, tu as réussi finalement...

Il y aurait encore des choses à prendre du code de NoSmoking comme la suppression des écouteurs, le fait que le curseur se déplace aussi quand on clique sur la barrre sauf si on ne le souhaites pas bien sûr...

Citation:

---

Envoyé par patricktoulon

j'essaie de comprendre comment fonctionne jsbin afin de m'en servir d'editeur de code je ne sais pas si c'est la solution mais en attendant ça aide

---

TU veux dire pour l'utiliser à la place d'un éditeur comme Visual Studio Code qui permet aussi de débugguer son code dynamiquement ??

re
oui en quelque sorte

sur mes discussions j'ai mis les lien de mes tests sur jsbin

mais le code HTML,CSS,JS et tout dans l'editeur "HTML" quand j'essaie de separer et de mettre chaque language dans son editeur prevu a cet effet dans jsbin ca marche plus

ben, la réponse de Beginner. est bonne

ton erreur était:
pannel HTML => ne pas mettre de script du tout
pannel Javascript => placer l'appel de ta fonction ajoute(), a la fin du script.

d'ailleurs, à ce propos, et sur les pages HTML "normales" il est déconseillé de placer du code javascript dans la partie header, car cela oblige les navigateur à en faire l'interprétation, ce qui ralentit l'affichage de la page.

le mieux c'est de placer tout son code javascript juste avant la balise fermante du body. et c'est d'ailleurs ainsi que jsbin est conçu.

Chacun de ses panels est limité à un rôle unique (soit du html, soit du css, soit du javascript, soit la console, etc...)

Il peut être utile de placer du javascript dans le header dans le cas ou celui-ci ajoute des éléments sur la page html, ou doit faire un appel ajax avant affichage, mais bon, ca fait rarement du code propre.

re

pour le js dans le body j'en avais fait deja l'experience
mais comme mon wysiwyg est entierement dynamique (au depart seul body existe) il est dans le head
pour la simple et bonne raison que je construit avec un array pour determiner les boutons que je veux je ne suis pas obligé de tout mettre(version light/full)
je vais mettre au propre jsbin
merci:plusser:

hoh le pauvre je l'avais pas vu beguinner mille excuses:plusser:
merci a tout les deux

@beguinner

Citation:

---

Il y aurait encore des choses à prendre du code de NoSmoking comme la suppression des écouteurs, le fait que le curseur se déplace aussi quand on clique sur la barrre sauf si on ne le souhaites pas bien sûr...

---

ben non je le souhaite pas
le projet etait un slider perso

1. la meme fonction pour tous
2. avec une certaine flexibilité pour la souris (le slide fonctionne sur toute la surface du div conteneur)et non tout le document comme avant ou meme les input range
3. qu'il ne demarre que si au par avant j'ai fait un down sur le curseur
4. et qu'il s'arrette au relachement de la souris ou a la sortie de la périphérie du conteneur
5. le mouseleave a résolu le probleme
6. a été ajouté grace a l'exemple de Nosmoking la possibilite de style different sur chaque slider meme si je n'utilse pas tout a fait son principe avec classList
7. a été supprimé grace a l'exemple de Nosmoking tout les if else sur element null ou pas vu que les evenement sont ajouté et supprimé a chaque down et up ou leave
8. puisque qu'au relacher les evenements move up leave son supprimés toutes ces conditions deviennent obsoletes dans le move car le move est enclancher qu'apres le down et suprimer au up leave

resultat le code en est que plus simple

oui il sont beaux c'est vite dit ;) il fonctionnent ca c'est sur


je suis en train de m'en faire un style areo W7 :ptdr:

cette partie la n'etant que du css

Code:

---

1 2 3 4 5 6

.nomstyle1{ blabla } .nomstyle2{ blabla }

---

le changement au down sur l'attribut "cl2"
le retour au up leave sur l'attribut"cl1"

ne pas oublier de leur mettre les attributs bien sur
merci en core a tout les deux et au NomFumeur aussi;)

j'aurais bien une question mais c'est du css alors ca ne se fera pas ici sinon je vais me faire encore engeuler moi :ptdr: