Je m'amusais à faire un plan d'un bâtiment en 2D interactif permettant de cliquer sur "Bureaux" et qu'il nous le montre sur la carte.
Le but du projet est de pouvoir mettre ce code sur un pupitre tactile. Par exemple nous rentrons dans un bâtiment et ne savons pas ou aller le pupitre serais donc utilisé pour indiqué ou ce trouve l'endroits recherché (Très gadget mais c'est le but).
Le langage que j'utilise est donc du HTML5, CSS3, ainsi que du JavaScript. Cependant je n'y connais vraiment pas grand chose ayant commencé à apprendre le JS très récemment. Mes pages sont avec l'extension .php pour un éventuel basculement vers un site dynamique.
J'ai donc ouvert ce post afin de demander un coup de pousse car je bloque depuis 1 semaine sur ce programme (sur la partie JS)
J'aimerais relier les boutons à mon plan dans le but que si le plan ou le bouton est appuyé il affiche l'endroits indiqué.
Au passage si vous avez des conseilles pour améliorer mon code ou même le design de mon tableau je suis preneur de tout conseil.
Merci d'avances à vous.
Voici mes codes ci-dessous :
(J'ai rajouté un script JS que j'ai trouvé sur internet et que j'ai à peut prêt compris donc j'ai réussi à le réadapter cependant j'aimerais que ce ne sois plus des onglets qui change en dessous mais que la carte avec l'endroits voulus passe en rose par exemple.)
HTML / JS :
<!DOCTYPE html> <!-- RVersion 1-->
<html>
<!-----------------------------------------------------------/ DEBUT HEAD \----------------------------------------------------------->
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="planbatcss.css">
</head>
<!-----------------------------------------------------------/ FIN HEAD \----------------------------------------------------------->
<!-----------------------------------------------------------/ DEBUT BODY \----------------------------------------------------------->
<body>
<!-----------------------------------------------------------/ DEBUT PLAN \----------------------------------------------------------->
<div class="Plan">
<div class="PlanBatiment"> <!-- Salles 999 à suprimer | 998 = MUR -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 6000 5000"
xml:space="preserve"
id="svg2"
version="1.1">
<metadata id="metadata8"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF> </metadata> <defs id="defs6" />
<g transform="matrix(1.3333333,0,0,-1.3333333,0,5692)" id="g10">
<g class="GroupeSalle-1">
<g id="g16">
<path class="Salle-1" id="path18" d="m 1094.16,3672.47 158.33,158.33 h 880.64 V 3017.91 2572.9 l -159.54,151.91 h -114 l -395.07,-346 -370.36,422.88 z" />
</g>
</g>
<g class="GroupeSalle-2">
<g id="g80">
<path class="Salle-2" id="path82" d="m 2133.13,3017.91 v 812.89 h 664.85 v -812.89 z" />
</g>
</g>
<g class="GroupeSalle-3">
<g id="g84">
<path class="Salle-3" id="path86" d="m 3329.87,3017.91 h -531.89 v 812.89 h 531.89 z" />
</g>
</g>
<g class="GroupeSalle-4">
<g id="g12">
<path class="Salle-4" id="path14" d="m 4102.34,3830.8 158.32,-158.33 v -654.56 h -930.79 v 812.89 z" />
</g>
</g>
<g class="GroupeSalle-5">
<g id="g24">
<path class="Salle-5" id="path26" d="m 4260.66,1535.09 h -949.95 v 158.32 h -316.65 v 110.83 110.83 166.24 h -277.07 v 166.24 h -237.48 l -118.75,-91.83 h -184.45 l -43.18,49.31 v 367.87 445.01 h 664.85 531.89 930.79 z" />
</g>
</g>
<g class="GroupeSalle-6">
<g id="g20">
<path class="Salle-6" id="path22" d="M 4260.66,1535.09 V 822.623 L 4102.34,664.298 h -791.63 v 870.792 z" />
</g>
</g>
<g class="GroupeSalle-7">
<g id="g28">
<path class="Salle-7" id="path30"d="m 2994.06,1693.41 h 316.65 V 1535.09 664.298 H 1964.95 v 870.792 h 554.14 158.32 v -158.33 h 316.65 z" />
</g>
</g>
<g class="GroupeSalle-8">
<g id="g48">
<path class="Salle-8" id="path50" d="m 2519.09,1693.41 v -158.32 h -554.14 -655.77 l 82.97,30.54 599.72,220.8 h 368.89 l 79.17,-53.44 v -39.58 z" />
</g>
<g id="g68">
<path class="Salle-8" id="path70" d="M 1964.95,1535.09 V 664.298 h -870.79 v 791.622 l 215.02,79.17 z" />
</g>
</g>
<g class="GroupeSalle-9">
<g id="g72">
<path class="Salle-9" id="path74" d="m 1991.87,1786.43 -599.72,-220.8 -127.46,346.18 460.38,169.5 -260.55,297.5 395.07,346 h 114 l 159.54,-151.91 v -367.87 l -273.54,312.32 -141.26,-123.72 273.54,-312.32 z" />
</g>
</g>
<g class="GroupeSalle-10">
<g id="g52">
<path class="Salle-10" id="path54" d="m 2360.76,2010.06 v -223.63 h -368.89 v 294.88 l 141.26,123.72 43.18,-49.31 h 184.45 z" />
</g>
</g>
<g class="GroupeSalle-11">
<g id="g56">
<path class="Salle-11" id="path58" d="m 2677.41,2010.06 h -316.65 v 145.66 l 118.75,91.83 h 237.48 v -166.24 h -39.58 z" />
</g>
<g id="g64">
<path class="Salle-11" id="path66" d="m 2994.06,2081.31 v -166.24 h -316.65 v 94.99 71.25 h 39.58 z" />
</g>
</g>
<g class="GroupeSalle-12">
<g id="g36">
<path class="Salle-12" id="path38" d="m 2677.41,1693.41 v -158.32 h -158.32 v 158.32 z" />
</g>
<g id="g40">
<path class="Salle-12" id="path42" d="m 2677.41,1693.41 h -158.32 -79.16 v 39.58 l -79.17,53.44 v 223.63 h 316.65 v -94.99 -110.83 z" />
</g>
<g id="g44">
<path class="Salle-12" id="path46" d="m 2677.41,1693.41 v 110.83 h 316.65 v -110.83 z" />
</g>
<g id="g60">
<path class="Salle-12" id="path62"d="m 2994.06,1915.07 v -110.83 h -316.65 v 110.83 z" />
</g>
</g>
<g class="GroupeSalle-13">
<g id="g32">
<path class="Salle-13" id="path34" d="m 2677.41,1376.76 v 158.33 158.32 h 316.65 v -316.65 z" />
</g>
</g>
<g class="GroupeSalle-998">
<g id="g76">
<path class="Salle-998" id="path78" d="m 1718.33,2393.63 141.26,123.72 273.54,-312.32 -141.26,-123.72 z" />
</g>
</g>
</g>
</svg>
</div>
<!-----------------------------------------------------------/ FIN PLAN \----------------------------------------------------------->
<!-----------------------------------------------------------/ DEBUT LISTES DES BOUTONS \----------------------------------------------------------->
<section>
<div class="LesBoutons"> <!--Acceuille les différentes parties de la carte -->
<p class="ListesDesBoutons">
<button class="btnSalle active" id="btn_1" data-onglet="1" > Entrée </button>
<button class="btnSalle " id="btn_2" data-onglet="2" > Burreau GED </button>
</p>
</div>
<div class="div_onglets"> <!-- Les onglets qui définisse toutes les salles -->
<div id="onglet_1" class="onglet">
<p>
Vous êtes ICI
</p>
</div>
<div id="onglet_2" class="onglet">
<p>GED</p>
</div>
</div>
</section>
<!-----------------------------------------------------------/ FIN LISTES DES BOUTONS \----------------------------------------------------------->
<!-----------------------------------------------------------/ DEBUT SCRIPT JAVA \----------------------------------------------------------->
<section class="JavaScriptDesSalles"> <!-- PENSER À APPRENDRE EN PROFONDEUR LE JV -->
<script type="text/javascript">
var Plan = document.querySelector('#Plan') // Créations des variables
var paths = Plan.querySelector('.PlanBatiment')
var links = Plan.querySelector('.ListesDesBoutons')
if (Nodelist.prototype.forEach ===undefined){
Nodelist.prototype.forEach = function (callback) {
[].forEach.call(this,callback)
}
}
paths.forEach(function (path) {
path.addEventListener("mousenter", function(e){
var id = this.id.replace("Salle-","")
Plan.querySelectorALL(".is-active").forEach(function (item) {
item.classList.remove("is-active")
})
document.querySelector("#List-" + id).classList.add("is-active")
document.querySelector("#region-"+id).classList.add("is-active")
})
})
</script>
</section>
<!-----------------------------------------------------------/ FIN SCRIPT JAVA \----------------------------------------------------------->
</body>
<!-----------------------------------------------------------/ FIN BODY \----------------------------------------------------------->
</html>
<script type="text/javascript">
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false);
}
}
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
</script>
Attention à ton code HTML, il a 10 erreurs et 25 avertissements au validateur de w3.org.
Normalement, on parle du validateur dans les cours HTML. Tu as dû sauter cette étape importante. Enfin, avec ou sans ton code JS (le 3ème), je ne vois pas de changement sur la page.
Tu apprends HTML sur quel cours ?
En tout cas, tu anticipes trop le basculement en page dynamique. Fais par étapes :
- note tous les éléments dont tu as besoin et balise les avec HTML (doit passer le validateur sans erreur ni avertissement)
- fais la mise en forme que tu souhaites avec CSS (doit passer le validateur CSS sans erreur ni avertissement)
- pour JS tu pourrais faire de la Programmation Orientée Objet (POO), ça peut s'y prêter pour ton projet : apprends la POO avec JS
- une fois la POO comprise tu peux finaliser une V1 de ton projet. V1 qui ne sera pas parfaite, mais sûrement mieux que ce que tu as pour le moment.
annexe :
si tu as plusieurs pages qui se modifient de manière dynamique (utilité d'un langage serveur comme PHP), tu peux les créer en HTML et tu les modifies de manière statique. Toujours un passage au validateur à chaque modification.
En vrac, j'ai vu ici et dans ton code :
Tu dis JVS et parfois JS. Javascript c'est JS. Pas JVS.
Dans un commentaire tu dis début script JAVA. Java et Javascript sont 2 langages de programmation. Mais Java n'est pas Javascript.
En parlant des commentaires, si tu fais des balises propres, tu n'as pas besoin d'indiquer le début et la fin de body, etc.
- Edité par CristianoRolando 14 août 2021 à 20:41:04
Effectivement je ne comprend pas, j'ai repris le code que j'ai mit sur le forum et j'ai crée un nouveau fichier ca n'affiche pas du tout le même choses que ce que j'ai sur mon autre PC...
Les erreurs HTML je ne vois pas vraiment ou je l'ai aurais faites, mes connaissances en HTML date d'il y a quelques années mais mon code semblais fonctionner il ne me manquais que le JS. J'avais appris l'HTML et CSS sur Openclassroom en 2016
Je suis donc aller voir sur le site w3.org. pour cette histoire de validateur. En effet il y a beaucoup d'erreur je corrigerais tout cas demain ainsi que mon CSS et je reviendrais vers vous dès que possible pour la partie JS. Je me renseignerais aussi comme conseillé sur le JS orienté POO.
Par rapport à mon erreur de langage entre JVS et JS je connais la différence entre le JAVA et le JAVASCRIPT cependant j'avais un doute sur l'abréviation.
J'ai vu sur le validateur, des erreurs avec la balise svg, j'ai compris que cette balise sert à faire du dessin vectoriel. Sur le site de w3schools, il n'y a pas les attributs que tu as inscrits, d'ailleurs, ce sont ces attributs qui lance une erreur dans le validateur.
Il est conseillé d'utiliser le logiciel libre et gratuit Inkscape pour faire du dessin vectoriel. Si, en plus, il a un système de calques, tu peux faire tous les dessins possibles pour ton site avec Inkscape puis appeler le fichier du calque correspondant avec JS.
ÉDIT :
Je me suis basé sur les cours de W3schools. Aucune erreur ni avertissement sur les validateurs HTML et CSS. Voici le code. La mise en forme n'est pas faite. Il y a de la redondance de CSS. Passe la souris et laisse la souris sur le texte NORD OUEST et le carré en haut à gauche deviendra rouge. Il redevient bleu lorsque la souris quitte le texte NORD OUEST. Pareil pour les 3 autres carrés.
Alors, perso moi je trouve ça hyper intéressant, mais concernant ton projet, ce serait sortir le bazooka pour chasser une souris. A mon sens, la POO n'est vraiment utile que si ton programme va être amener à créer plusieurs objets ayant une structure commune, et ce dans différents contextes ( lors d'une ou plusieurs actions de l'utilisateur, ou à différents endroits du ou des scripts ). Cela épargne alors d'avoir à rédiger plusieurs fois la structure de ces objets.
Après, en dehors de la "vraie" POO ( je veux dire par là les notions de classe, de prototype, d'héritage, etc. ), la simple notion d'objet peut apporter des avantages non négligeables, comme la gestion d'un espace de nom ( par exemple si tu veux créer une fonction alert(), tu l'inclut dans un objet pour ne pas faire conflit avec la fonction native ), ou le regroupement de variables ( par exemple la surface de la pièce 1, la hauteur de la pièce 1, le nombre de places assises de la pièce 1, etc. )
Par rapport au POO même si c'est "sortir un bazooka pour chasser une souris" (expression que j'aime beaucoup) au moins ca m'apprendras des choses que je ne connais pas encore. Après si il y a un moyen plus "rapide" de finir mon projet avant de me lancer dans la POO effectivement je me lancerais dans la POO plus tard.
Pour répondre sur l'éditeur vectoriel j'utilise SketchUp c'est le seul que je comprend à peut prêt
Voici donc mon code : HTML / CSS / JS corrigé et validé par le validateur w3.org. ci-dessous.
CODE HTML / JS :
<!DOCTYPE html><!-- RVersion 1-->
<html lang="fr">
<head>
<title>DELTA</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="planbatcss.css">
</head>
<header> <!-- Bandeau haut de la borne -->
<div class="LogoDelta">
<img alt="GROUPEDELTA" src="https://www.groupe-delta.com/wp-content/uploads/2020/06/logo-groupe-delta-1.png" class="LogoDelta"/>
</div>
<h1>GROUPE DELTA </h1>
<h2>Carte du bâtiment</h2>
<p>Cliquez à l'endrois ou vous souhaitez vous rendre. </p>
</header>
<body>
<div class="Plan">
<div class="PlanBatiment"> <!-- Salles 999 à suprimer | 998 = MUR -->
<svg viewBox="0 0 6000 5000" id="svg2" version="1.1">
<g class="GroupeSalle-1">
<g id="g16">
<path class="Salle-1" id="path18" d="m 1094.16,3672.47 158.33,158.33 h 880.64 V 3017.91 2572.9 l -159.54,151.91 h -114 l -395.07,-346 -370.36,422.88 z" />
</g>
</g>
<g class="GroupeSalle-2">
<g id="g80">
<path class="Salle-2" id="path82" d="m 2133.13,3017.91 v 812.89 h 664.85 v -812.89 z" />
</g>
</g>
<g class="GroupeSalle-3">
<g id="g84">
<path class="Salle-3" id="path86" d="m 3329.87,3017.91 h -531.89 v 812.89 h 531.89 z" />
</g>
</g>
<g class="GroupeSalle-4">
<g id="g12">
<path class="Salle-4" id="path14" d="m 4102.34,3830.8 158.32,-158.33 v -654.56 h -930.79 v 812.89 z" />
</g>
</g>
<g class="GroupeSalle-5">
<g id="g24">
<path class="Salle-5" id="path26" d="m 4260.66,1535.09 h -949.95 v 158.32 h -316.65 v 110.83 110.83 166.24 h -277.07 v 166.24 h -237.48 l -118.75,-91.83 h -184.45 l -43.18,49.31 v 367.87 445.01 h 664.85 531.89 930.79 z" />
</g>
</g>
<g class="GroupeSalle-6">
<g id="g20">
<path class="Salle-6" id="path22" d="M 4260.66,1535.09 V 822.623 L 4102.34,664.298 h -791.63 v 870.792 z" />
</g>
</g>
<g class="GroupeSalle-7">
<g id="g28">
<path class="Salle-7" id="path30" d="m 2994.06,1693.41 h 316.65 V 1535.09 664.298 H 1964.95 v 870.792 h 554.14 158.32 v -158.33 h 316.65 z" />
</g>
</g>
<g class="GroupeSalle-8">
<g id="g48">
<path class="Salle-8" id="path50" d="m 2519.09,1693.41 v -158.32 h -554.14 -655.77 l 82.97,30.54 599.72,220.8 h 368.89 l 79.17,-53.44 v -39.58 z" />
</g>
<g id="g68">
<path class="Salle-8" id="path70" d="M 1964.95,1535.09 V 664.298 h -870.79 v 791.622 l 215.02,79.17 z" />
</g>
</g>
<g class="GroupeSalle-9">
<g id="g72">
<path class="Salle-9" id="path74" d="m 1991.87,1786.43 -599.72,-220.8 -127.46,346.18 460.38,169.5 -260.55,297.5 395.07,346 h 114 l 159.54,-151.91 v -367.87 l -273.54,312.32 -141.26,-123.72 273.54,-312.32 z" />
</g>
</g>
<g class="GroupeSalle-10">
<g id="g52">
<path class="Salle-10" id="path54" d="m 2360.76,2010.06 v -223.63 h -368.89 v 294.88 l 141.26,123.72 43.18,-49.31 h 184.45 z" />
</g>
</g>
<g class="GroupeSalle-11">
<g id="g56">
<path class="Salle-11" id="path58" d="m 2677.41,2010.06 h -316.65 v 145.66 l 118.75,91.83 h 237.48 v -166.24 h -39.58 z" />
</g>
<g id="g64">
<path class="Salle-11" id="path66" d="m 2994.06,2081.31 v -166.24 h -316.65 v 94.99 71.25 h 39.58 z" />
</g>
</g>
<g class="GroupeSalle-12">
<g id="g36">
<path class="Salle-12" id="path38" d="m 2677.41,1693.41 v -158.32 h -158.32 v 158.32 z" />
</g>
<g id="g40">
<path class="Salle-12" id="path42" d="m 2677.41,1693.41 h -158.32 -79.16 v 39.58 l -79.17,53.44 v 223.63 h 316.65 v -94.99 -110.83 z" />
</g>
<g id="g44">
<path class="Salle-12" id="path46" d="m 2677.41,1693.41 v 110.83 h 316.65 v -110.83 z" />
</g>
<g id="g60">
<path class="Salle-12" id="path62" d="m 2994.06,1915.07 v -110.83 h -316.65 v 110.83 z" />
</g>
</g>
<g class="GroupeSalle-13">
<g id="g32">
<path class="Salle-13" id="path34" d="m 2677.41,1376.76 v 158.33 158.32 h 316.65 v -316.65 z" />
</g>
</g>
<g class="GroupeSalle-998">
<g id="g76">
<path class="Salle-998" id="path78" d="m 1718.33,2393.63 141.26,123.72 273.54,-312.32 -141.26,-123.72 z" />
</g>
</g>
</svg>
</div>
</div>
<div class="LesBoutons"> <!--Acceuille les différentes parties de la carte -->
<p class="ListesDesBoutons">
<button class="btnSalle active" id="btn_1" data-onglet="1" > Entrée </button>
<button class="btnSalle " id="btn_2" data-onglet="2" > Burreau GED </button>
</p>
</div>
<div class="div_onglets"> <!-- Les onglets qui définisse toutes les salles -->
<div id="onglet_1" class="onglet">
<p>
Vous êtes ICI
</p>
</div>
<div id="onglet_2" class="onglet">
<p>GED</p>
</div>
</div>
<script> // PENSER À APPRENDRE EN PROFONDEUR LE JV
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false);
}
}
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
</script>
</body>
</html>
<script> // PENSER À APPRENDRE EN PROFONDEUR LE JV
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false);
}
}
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
</script>
Pour finir voici une image de ce que je vois moi de mon post quand le tout ensemble fonctionne.
Pour l'instant sur la photo la partie coloré sur la carte c'est quand je passe mon curseur sur une des pièces de mon plan, cependant j'aimerais que ca sois quand ont clique sur la carte ou sur le bouton qu'il affiche le bouton/partie de la carte concerné. (j'ai pris les logo/nom d'une société pas loin de chez moi manquant d'idée pour un nom donc ne pas en tenir compte ca seras amené à changer)
Encore une fois, la POO est très intéressante, mais d'après ce que je perçois de ton projet, tu devrais aisément pouvoir t'en passer. Je te conseille donc de le finir de manière "classique". Rien n'empêche l'utilisation des objets, une pièce pouvant être définie comme un objet ayant des propriétés comme la longueur, la largeur ( bien que tes pièces n'étant pas toutes de forme rectangulaire, ça n'est pas pertinent ), le nombre de places assises, les coordonnées sur la carte, etc. Une fois que ce projet est fonctionnel, garde précieusement une copie de sauvegarde, puis tu peux toujours te pencher sur la réécriture du projet en utilisant un maximum la POO. Tu pourras alors comparer la taille et la complexité de tes deux versions et évaluer si la POO était appropriée.
Pour illustrer un peu mon propos, imaginons un exemple de cas où la POO serait chaudement recommandée, un jeu en ligne de type jeu de rôle à la dongeons et dragons. Ce jeu contiendra un grand nombre de personnages, soit des ensembles de variables ( nom, point de vie, force, dextérité,... ) organisés sur une structure commune. D'où l'utilisation d'objets pour regrouper ces variables entre elles. Mais ce qui rend l'utilisation des classes intéressante, c'est le fait que des personnages vont être créés dans plusieurs contextes ( plusieurs endroits du ou des scripts du jeu ) : - lorsqu'un nouvel utilisateur crée son personnage - dans la partie du programme qui gère les déplacements d'un joueur sur la carte, le programme peut créer des personnages ennemis "fixes" ( situés à des endroits bien précis de la carte et liés à des évènements du scénario ), et d'autres qui seront créés de manière aléatoires quand le joueur "déambule" sur la carte ( histoire de mettre un peu d'action ). - Quand le joueur entre dans un village, il y a encore une fois des personnages ( on parle de PNJ ) "fixes", et par exemple quand on rentre dans l'auberge, on rencontre des personnages générés de manières aléatoires.
Nous avons donc ici 5 contextes différents amenant la création d'objets ayant une structure commune. Plutôt que de coder 5 fois la structure complète de l'objet, on crée alors une classes, qui sera simplement instanciée dans les 5 contextes différents, ça allège alors le codage et permet éventuellement des mises à jour plus simples à mettre en place. Dans ton cas, même si tu utilises des objets représentant les pièces, tu ne les crées qu'à un seul endroit de ton script. La définition d'une classe n'apporte pas grand chose. Si tu veux ajouter une propriété ( tiens, si on ajoutais la hauteur sous plafond ? ) à tes objets, tu devrais modifier non seulement la classe, mais de toute façon il faudrait que tu modifies toutes les instanciations. Le nombre de pièces dans le bâtiment n'étant pas susceptible de varier très souvent, ni dans des contextes très variés ( si des travaux d'extension sont menés, seul le webmaster devra modifier le plan, mais il est peu probables que des pièces puissent être ajoutés à l'initiative du script, ou par l'action d'un utilisateur ).
Reste que la POO est quelque chose de très intéressant, et qui rend bien des services, mais qui n'a de sens que dans des projet d'une certaine envergure ( non pas que je dénigre l'intérêt du tien, loin de là ! ).
D'accord merci beaucoup je vois mieux ce que la POO permet de faire. Effectivement je pense que dans mon projet elle n'auras pas vraiment d'utilité étant donnée que la seul interaction que les utilisateurs aurons avec le code c'est de cliquer sur un bouton ou un endroits de la carte.
Cependant, je n'ai réussi qu'a faire des boutons qui m'affiche un onglets 1 ou 2 en fonction du bouton activé mais je n'arrive pas à le transformer de façon à ce que ce ne sois plus un onglet qui sois affiché mais bien la carte qui se "colorie" d'une couleur montrant la partie souhaité. Je pense savoir ou changer le code mais comment je n'ai aucune idée.
Alors, pour le peu que j'arrive à comprendre la démarche de ton code, ça se passerait plutôt à la ligne 49. Tu appliques bien un eventListener sur tes boutons, et le callback de cet eventListener est la fonction displayHideOnglets().
Il faut donc que tu agisse sur ce point. Soit la fonction displayHideOnglets() fonctionne bien et tu souhaite conserver son usage lors du clic sur le bouton, mais tu voudrais y ajouter "quelque chose de plus", à savoir une autre fonction, auquel cas tu dois définir un autre callback, qui ferait lui-même appel à la fonction displayHideOnglets(), puis à une autre fonction :
Soit tu remplace la fonction displayHideOnglets() par une toute autre fonction, qui se chargera de colorier l'élément voulu. Une petite chose te manque, il faudrait que dans tes boutons, tu mettre un paramètre permettant d'identifier l'élément correspondant ( perso, dans ton HTML, je ne sais pas identifier quel élément correspond à l'entrée, par exemple ).
Non, je parle des éléments SVG, qui définissent les zones à colorier sur le plan. Je te suggère de procéder par petites étapes, tout d'abord modifier ta fonction displayHideOnglets pour y faire figurer un console.log(), ce log devra reporté l'id du path de la salle concernée. Ensuite, un document.getElementById().fill = *** devrait te permettre de changer la couleur. Bien sûr, la troisième étape consistera à réinitialiser la couleur des path avant de changer la couleur de la salle activée.
J'ai essayé de rajouter le consol.log("Salut) qui fonctionne parfaitement par contre si jamais j'ajoute DisplayHideOnglets();
Il me met une erreur mais je comprend pas d'où elle pourrais venir (Désolé en JS je suis vraiment novice )
CODE JS :
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i <onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i <cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
function initListener(){ // Code à changer
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i <cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideOnglets(NumOnglet);
console.log("Salut");
}, false);
}
}
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
La partie modifié (42-51):
function initListener(){ // Code à changer
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i <cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideOnglets(NumOnglet);
console.log("Salut");
}, false);
}
}
Ton MO contient : " faire un plan d'un bâtiment en 2D interactif permettant de cliquer sur "Bureaux" et qu'il nous le montre sur la carte" C'est ce que je t'ai proposé dans mon code HTML et le JS, simplissime (pas d'écoute d'événement).
J'ai vu que Lucas t'a parlé de l'eventListener. Pourquoi en as-tu besoin ? Est-ce que tu veux en faire davantage que ce que je cite de ton MO ?
As-tu testé mon code HTML ? As-tu lu le MP que je t'ai envoyé ?
Attention, je ne dis pas que tu n'as pas besoin d'eventListener.
Bon, désolé, mais, bien que tu es débutant, ça manque de rigueur. Peut-être, en tout cas je l'espère, des erreurs d'étourderies. Mais, il y en a 1 dans le HTML et 4 dans le CSS.
Celle du HTML, c'est que tu as mis le header avant le body alors que le header EST DANS le body. Et pour CSS, une erreur dans un commentaire, je crois que la validateur n'aime pas les abus de tirets. En plus, ce type de commentaire ne sert strictement à rien, le nom des balises est suffisamment explicite. Et tu as 2 propriétés erronées (des valeurs interdites ?) et une erreur orthographique d'une propriété.
Regarde dans la doc de SketchUp, je ne connais que de nom, mais, je suis certain que tu peux exporter tes dessins en xml. xml est le langage utilisé par SVG. Tu dois trouver des infos pour identifier tes éléments dessinés. Tu n'as besoin que de l'identifiant (attribut html/xml : id).
Si SketchUp ne permet pas cela, essaye avec Inkscape (conseillé par W3schools).
- Edité par CristianoRolando 16 août 2021 à 16:04:31
Effectivement, j'ai bien lus ton MP ainsi que testé ton code seulement la partie JS ne fonctionne pas pour ma part les cubes ne change pas de couleurs quand je passe sur le texte "NORD EST" ect.. par contre des erreurs s'affiche me disant que "highlightColor" et "defaultColor" n'était pas définie.
Je ne sais pas trop à quoi sert le "eventListener" dans mon cours sur le JS je commence seulement à utiliser les fonctions..
Le code JS est un code que j'ai trouvé sur internet et que j'ai essayer de comprendre et de modifier afin qu'il fonctionne comme je le souhaite.
Par rapport à mes erreurs en CSS et HTML elles sont bien dues à un manque de rigueur de ma part, ayant fait beauucoup de tests et changé pas mal de fois mon code ainsi que mes nom de variables je ne me rend pas compte de certaines erreurs. De plus les commentaires sont voué à disparaitre mais uniquement à la fin du code étant donnée que je fait beaucoup de modification je me perd facilement dans mes lignes je fait donc ceci pour me repérer plus rapidement.
Pour moi mon code svg est fini, le plan "fonctionne" (Je l'ai exporté de SketchUp vers PDF puis convertie en svg) et fait bien l'effet souhaité quand je passe ma souris dessus, cependant ce code seras amené à être sur une sorte de pupitre tactile ce qui veux dire que j'ai besoin de remplacé mon effet non pas par un passage de la souris sur l'élément mais bien un clic sur le bouton ou la partie souhaité.
Alors pour les "erreurs" HTML et CSS, sois-en averti, mais en phase dé développement, elles ne sont pas importantes tant que ça fonctionne. Il faudra te pencher dessus avant de mettre en production.
Pour en revenir au js, l'eventListener ( écouteur d'évènements dans la langue de Molière ) sert à attribuer une fonction ( appelée callback ) à un évènement particulier. Par exemple, pour déclencher la fonction "maFonction" quand on clique sur l'élément ayant l'id "monElement" :
Un poil plus complexe, mais pour transmettre l'élément sur lequel l'utilisateur a cliqué, dans le cas où leventListener a été attribué à toute une série de boutons ( ayant la classe "mesElements" ) :
Dans le premier cas, maFonction() est le callback que l'on désigne à l'eventListener. Dans le deuxième cas, on définit un callback sous forme de fonction anonyme, ici écrite sous forme de "arrow function" ( mais on aurait pu écrire function(){...} ) et le callback appelle maFonction, en lui passant en paramètre event.target, qui désignera l'élément qui aura été cliqué. Pratique pour récupérer l'id de l'élément qui aura été cliqué. Exemple, si l'utilisateur a cliqué sur l'un des boutons qui ont la classe 'mesElements' et qui ont chacun un id spécifique, on le récupère comme ça dans maFonction() :
function maFonction( elt ) {
console.log('id du bouton cliqué : ' + elt.id );
}
Ici, le paramètre elt sera l'event.target transmis par le callback de l'eventListener, donc LE bouton qui aura été cliqué. Tu peux récupérer les valeurs actuelles de ses propriétés, mais tu peux aussi les modifier, ou en ajouter et en supprimer. Là, la propriété qui t'intéresse serait elt.style.color :
function maFonction(elt) {
console.log('id du bouton cliqué : ' + elt.id );
elt.style.color = "#990000";
}
Ceci coloriera ton élément en rouge ( ce qui n'est pas forcément du plus bel effet esthétique, mais tu adapteras ).
Dernier point, l'erreur que tu rencontre dans ton code modifié se situe à la ligne 47. Tu transmet un paramètre alors que la fonction n'en attend pas, pire, numOnglet n'est pas défini dans ton espace global, c'est une variable locale de ta fonction displayHideOnglets. Laisses les parenthèses vides et tout devrait bien se passer ( enfin, si ça fonctionnait avant, y'a pas de raison ).
Sommes-nous d'accord que la volonté de Rémy est d'avoir à gauche un plan de bâtiment en 2D avec des polygones contigus qui représentent des pièces listées textuellement à droite du plan ?
Sommes-nous également d'accord que l'objectif est de toucher le texte de la pièce pour que son polygone change de couleur pour indiquer où se trouve la pièce ?
Oui Rolando, c'est bien ca l'objectif et j'ai essayé ton code, ca ne fonctionnais pas, je l'ai injecté dans mon code et même modifier pour qu'il se fonde dans mes variables, cela ne fonctionnais toujours pas.
J'ai essayé ton code Lucas mais maintenant j'ai une erreur sur ma variable :
var NumOnglet = this.getAttribute("data-onglet");
qui se trouve dans la fonction :
var DisplayHideOnglets = function() {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher // A changer pour afficher non pas l'onglets en bas mais sur la carte svg
var NumOnglet = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){
ShowElementById("onglet_"+NumOnglet);
addClassActiveElm("btn_"+NumOnglet);
}
};
Cependant de ce que je pense avoir compris de cette ligne si je la retire ca coupe le seul lien que j'ai pour relier mon code JS à mes onglets se trouvant dans mon HTML ?
Petite correction, je ne sais pas si c'est mieux ou plus mauvais mais voici un autre test que j'ai fait maintenant l'erreur qu'il m'affiche est simplement que l'id que je lui demande n'est pas définie mais le "console.log()" fonctionne bien.
JS :
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function(elt) {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumSalle = this.getAttribute("data-onglet");
//on affiche l'onglet
if(typeof(NumSalle) !="undefined" && NumSalle!=null){
ShowElementById("onglet_"+NumSalle);
addClassActiveElm("btn_"+NumSalle);
console.log('id du bouton cliqué : ' + elt.id );
}
};
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false );
}
}
/*function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideOnglets()
}, false );
}
}*/
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
J'ai réussi à faire en sorte qu'il me prenne la class concerné, maintenant il faut que je trouve une solution pour une voir la classe sélectionnée il change la couleur de la carte. Je met ci-dessous le code, je sais il y a deux "class" je supprimerais la class="onglet" par la suite.
Partie du HTML modifié :
<div class="LesBoutons"> <!--Acceuille les différentes parties de la carte -->
<p class="ListesDesBoutons">
<button class="btnSalle active" id="btn_1" data-onglet="1" data-salle="1" > Entrée </button>
<button class="btnSalle " id="btn_2" data-onglet="2" data-salle="2" > Burreau GED </button>
<button class="btnSalle " id="btn_3" data-onglet="3" data-salle="3" > Burreau GEED </button>
</p>
</div>
<div class="div_onglets"> <!-- Les onglets qui définisse toutes les salles -->
<div id="onglet_1" class="onglet" class="salle">
<p>
Vous êtes ICI
</p>
</div>
<div id="onglet_2" class="onglet" class="salle">
<p>GED</p>
</div>
<div id="onglet_3" class="onglet" class="salle">
<p>GEED</p>
</div>
</div>
Partie du JS :
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active";
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');
}
var DisplayHideOnglets = function(elt) {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumSalle = this.getAttribute("data-onglet");
var ZoneClass = this.getAttribute("data-salle")
//on affiche l'onglet
if(typeof(NumSalle) !="undefined" && NumSalle!=null){
ShowElementById("onglet_"+NumSalle);
addClassActiveElm("btn_"+NumSalle);
console.log("Class : " + ZoneClass);
//console.log('class du bouton cliqué : ' + elt.ZoneClass );
}
};
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false );
}
}
/*function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideOnglets()
console.log('id du bouton cliqué : ' + elt.id );
}, false );
}
}*/
//Initialisation
initListener();
//par défaut.. on affiche le premier onglet
ShowElementById("onglet_1");
À voir ce que propose SketchUp, mais, Inkscape est conçu pour le dessin vectoriel qui est géré par le SVG qui a été conçu par le w3c (entité la plus importante du monde du Web).
Avec ton objectif, normalement, tu as fait (avec quelques nuances) :
1/ création du bâtiment et de ses pièces en dessin vectoriel ainsi que la cadre contenant le nom des pièces
2/ exportation en svg et ajout des attributs nécessaires (normalement, possible pendant la configuration de l'exportation)
- pour la balise polygon : id
- pour la balise text : 2 attributs d'événements (voir sur ce lien la liste des événements)
3/ Coder chaque fonction appelée par un événement
4/ FIN
Même débutant, en se préparant quelques heures pour chercher comment faire les fonctions en JS, en 5 ou 6 heures le travail est fait.
Et si je comprends la fonction displayHideOnglets (c'est Tabs en anglais pour onglets), tu as peut-être plusieurs niveaux du bâtiment ou tu veux afficher/cacher le nom de certaines pièces. C'est une autre partie du projet initial. Si tu mélanges tout, tu vas te perdre, il faut que le programme soit modulaire. Si tu supprimes une fonction et son callback, le programme doit fonctionner quand même.
Je pense que le souci est que tu ne transmet pas ton élément HTML à ta fonction displayHideOnglets().
Comme je te l'ai dit, le callback de l'eventListener est le seul à avoir de manière "implicite" accès à l'élément qui a reçu l'évènement ( sur lequel on a cliqué ).
Il faut qua, dans la définition de ton eventListener, tu écrives un callback anonyme ( function(){...} ou () => {...} qui appelle ta fonction displayHideOnglet en lui passent event.target en paramètre. Bien sûr, il faut que tu modifie légèrement ta définition de displayHideOnglets, à savoir qu'elle doit demander un paramètre ( appelles-le elt, par exemple, mais peu importe ) et tu aura alors accès, dans cette fonction displayHideOnglets, de cette manière : elt.getAttribute('data-onglet').
J'ai vu tes essais, y compris la partie mise en commentaire, tu n'es pas loin, mais tu te mélanges encore les crayons. - mets en commentaire la partie ligne 47 à 54. - décommente l56 à 66 - ligne 62, passes en paramètre ton event.target ( displayHideElement(event.target) ) - l63 : tu n'as pas défini elt à cet endroit du script, mais tu peux logger event.target.id - et enfin ligne 33 et 34, remplace this ( qui dans ce contexte ne renvoie à rien ) par elt ( le nom de ton paramètre, qui aura donc pour valeur l'élément HTML ayant été cliqué, soit l'event.target transmis par le callback )
Je sais, toute cette démarche semble difficile à comprendre au début, et ça fait beaucoup de vocabulaire complexe. :/
Désolé Rolando si un débutant y arriverais en 5-6h mais le tout c'est que je comprenne ce que j'ai fait et pourquoi car si je voulais juste la solution ca n'aurais pas d'intérêt, le soucis c'est que je n'ai jamais été très scolaire et me lancer dans un projet comme ca sans avoir de connaissances en JS était pas une superbe idée(à la base je pensais que du PHP aurais suffit). Cependant en parallèle je suis des cours sur le JS et au fur à mesure je comprend le code que j'ai écrit et arrive ainsi à mieux comprendre vos explications plutôt que d'essayer des choses dans le flou.
Merci beaucoup Lucas, J'ai suivie les instructions et j'ai bien l'id d'affiché dans la console :
Par contre j'ai pas compris pour la partie avec la fonction anonyme j'ai essayé de la mettre j'avais des erreurs et j'ai essayé sans ca fonctionne
Je confirme que je ne comprend pas tout parfois vous m'avez conseillé des choses je suis aller voir sur internet à quoi correspondais les balises car elle ne me disais rien du tout. Donc si je comprend bien le DisplayHideOnglets (Que j'ai changé en DisplayHideSalles) sert à afficher et non pas cacher dans ce que j'essais de faire?
------------------------------------------------
Bon je pense que je commence à avancer (du moins c'est mon impression), je souhaitais savoir si c'était possible dans ma fonction Listener(), dans ma boucle cl_btnSalle(), de faire appel à une fonction qui aurais tout les id des salles et pourrais me les afficher ? faire le même principe que les id de boutons.
Voici mon JS :
function hideAllElementByClassNam(clName){
var onglets = document.getElementsByClassName("onglet");
//on masque tous les onglets
for (var i = 0; i < onglets.length; i++) {
onglets[i].style.display = 'none';
}
}
function ShowElementById(idElm){
document.getElementById(idElm).style.display = "inline-block";
}
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active"; // Le bouton qui s'active
document.getElementById(idElm).classPart ="GroupeSalle active"; // La partie de la carte qui s'active
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,''); // Le bouton qui est désactivé
e.classPart = e.classPart.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,''); // La partie de la carte qui est désactivé
}
var DisplayHideSalles = function(elt) {
//on masque tous les onglets
hideAllElementByClassNam('onglet');
//numero de l'onglet à afficher
var NumSalle = elt.getAttribute("data-salle");
//var ZoneClass = elt.getAttribute("data-salle")
//on affiche l'onglet
if(typeof(NumSalle) !="undefined" && NumSalle!=null){
ShowElementById("onglet_"+NumSalle);
addClassActiveElm("btn_"+NumSalle);
//console.log("Class : " + ZoneClass);
//console.log('class du bouton cliqué : ' + elt.ZoneClass );
}
};
/*function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle");
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', DisplayHideOnglets, false );
}
}*/
function initListener(){
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle"); // Prend l'élément class des boutons
var cl_GroupesSalles = document.getElementsByClassName("GroupesSalles"); // Prend l'élément class des groupes de salles
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideSalles(event.target)
console.log('id du bouton cliqué : ' + event.target.id ); // id btn
// appeler une fonction avec toutes les id de salles ?
console.log('id de la salle visée : ' + event.target.id ); // id salle
}, false );
}
}
/*for (var i = 0; i < cl_GroupesSalles.length; i++) {
cl_GroupesSalles[i].addEventListener('click', function(){
DisplayHideSalles(event.target)
console.log('id de la salle cliqué : ' + event.target.id );
}, false );
}*/
//Initialisation
initListener();
Bien qu'en anglais, regarde le cours JS de w3schools. Pour la fonction anonyme voir là.
Si tu ne comprends pas du tout le code JS que j'ai envoyé, c'est que tu as sauté des étapes d'apprentissage. C'est paradoxal avec ton code JS qui est bien garni. Maintenant, je doute que ce soit toi qui l'aies créé totalement. Et en faisant ainsi, on en arrive là.
Regarde, tu as plein de sites, les bonnes pratiques de codage. Je vois btn_1, btn_2 etc. Si btn_1 représente le nom "WC des femmes", mets plutôt : btn_WC_femmes.
Donc si je comprend bien le DisplayHideOnglets (Que j'ai changé en DisplayHideSalles) sert à afficher et non pas cacher dans ce que j'essais de faire?
Je ne sais pas à qui tu t'adresses, mais, jamais, je n'ai créé dans mon code une fonction displayHideXXX().
D'ailleurs, cette fonction doit faire quoi ? C'est quoi ton idée avec cette fonction ?
Conseil bonne pratique : fais étape par étape. Par exemple, construis grâce à la balise SVG, une forme, manipule la avec du JS (lui faire changer sa couleur, ...), juste pour maîtriser la base. Ensuite, dans un autre fichier, tu gères l'apparition/disparition d'une forme. Dans un plan 2D, une pièce est une forme. Ainsi de suite.
Je lis pour la énième fois le fil. Il est intéressant, c'est la raison pour laquelle je le suis. Maintenant, tes messages, c'est un bazar sans nom. Tu utilises des trucs dont tu ne sais pas à quoi ils servent. Tu aurais dit : "J'ai vu de la lumière, je suis entré." Ça aurait été la même.
C'est une série ce fil. On découvre de nouvelles idées ou alors un code qui ne correspond pas aux idées. Par exemple, dans ton tout premier code, tu as bien une fonction displayHideXXX(), mais, dans la partie littérale du message, tu ne parles que de valoriser une pièce quand on clique sur son nom.
Je pense avoir compris que l'invocation de cette fonction va faire apparaître/disparaître la pièce en question. Le code a l'air correct en plus. Mais, je crois que tu galères avec le gestionnaire d'événements.
Le gestionnaire d'événement c'est par exemple : quand je fais une action (à la souris, au clavier, ...) activer telle fonction correspondante. Il faut savoir ce qu'on veut, et voir comment est conçu le gestionnaire.
- Edité par CristianoRolando 18 août 2021 à 12:22:18
J'ai trouvé un code sur internet qui affichais des onglets en fonction du bouton sur le quel ont cliquais, j'ai essayé d'analyser le code et prendre les parties qui m'intéressais donc oui c'est exactement comme sur la photo sauf que au fur à mesure je retire les choses qui ne me servent pas, je change les notations pour m'approprier le code et pas juste rajouter un bout de code dans le mien et dire voila fini.
Par rapport au bouton pour l'instant je n'ai pas le nom de toutes les salles j'ai donc un plan avec des numéros pour le moment et je remplacerais les numéros par la suite. Cependant étant donnée que j'ai crée une variable NumSalle qui ajoute après l'underscore le numéro de la salle je ne sais pas comment faire si les nom après changent. Comme dans ton exemple si j'ai btn_WC_Femme et btn_WC_Homme, Comment je vais faire pour qu'il me prenne en compte les bon id ? (ma question est peut être idiote).
Sur la fonction DisplayHideXXX() je n'ai pas encore tout compris étant donnée que je ne comprend pas trop cette balise la :
Je sais juste que sans ca mon code ne fonctionne pas. Quand tu dit j'ai vue de la lumière je suis entré c'est un peux ca, Je ne connaissais rien au JS (c'est encore le cas sur beaucoup de choses) j'ai vus un code qui me permettrais d'avancer avec un exemple proche du mien, voyant que ca fonctionne plutôt bien j'essais de le peaufiner tant bien que mal. J'en referais surement un de 0 (pour la partie JS que je développe tout de A-Z voir si j'ai bien compris tout ce que j'ai appris et voir si il peux y avoir des améliorations à faire) J'aurais bien voulue tout recommencer et le faire moi même mais voyant que je suis à un rien de réussir j'ai du mal à lâcher prise.
Effectivement je suis bloqué dans mon Listener j'aimerais lui demander de faire des choses quand une action est faite mais j'ai beau chercher je ne vois pas comment.
-------------------------------------------
Bon j'ai retravailler un maximum mon code j'ai retiré tout ce qui ne servais à rien (je pense) et mit en commentaire ce qui pourrais peut-être me servir, il n'est pas complètement opérationnel mais je pense que c'est déjà mieux ?
/*function defaultSalle(idElm){ // A faire par la suite afficher l'entrée par defaut
document.getElementById(idElm).style.display = "inline-block";
}*/
function addClassActiveElm(idElm){
var cl_btn_active = document.getElementsByClassName("active");
//on retire la class Active de tous les onglets
for (var i = 0; i < cl_btn_active.length; i++) {
removeClass(cl_btn_active[i],"active") ;
}
//on met la class active au bouton cliqué
document.getElementById(idElm).className = "btnSalle active"; // Le bouton qui s'active
//document.getElementById(idElm).classPart ="GroupeSalle active"; // La partie de la carte qui s'active
}
function removeClass(e,c) {
e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,''); // Le bouton qui est désactivé
//e.classPart = e.classPart.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,''); // La partie de la carte qui est désactivé
}
var DisplayHideSalles = function(elt) {
//numero de l'onglet à afficher
var NumSalle = elt.getAttribute("data-salle");
//on affiche l'onglet
if(typeof(NumSalle) !="undefined" && NumSalle!=null){
addClassActiveElm("btn_"+NumSalle);
}
};
function initListener(){ // Action à faire : Relier les boutons aux des salles | Clic sur bouton = colorie la salle assossier | Clic sur la carte = Active le bouton assossier |
//on ajoute le listener
var cl_btnSalle = document.getElementsByClassName("btnSalle"); // Prend l'élément class des boutons
var cl_GroupesSalles = document.getElementsByClassName("GroupesSalles"); // Prend l'élément class des groupes de salles
for (var i = 0; i < cl_btnSalle.length; i++) {
cl_btnSalle[i].addEventListener('click', function(){
DisplayHideSalles(event.target)
console.log('id du bouton cliqué : ' + event.target.id ); // id btn
// appeler une fonction avec toutes les id de salles ?
//console.log('id de la salle visée : ' + event.target.id ); // id salle
}, false );
}
}
//Initialisation
initListener();
//Choix par default : L'entrée
//defaultSalle("btn_1");
Va voir les bonnes pratiques conseillées par w3schools : là.
if(typeof(NumSalle) !="undefined" && NumSalle!=null) il faut découper la ligne :
1/ if : remplace ce qui suit par un booléen : VRAI, on entre dans la condition, FAUX, on entre dans la condition du else s'il existe.
2/ typeof(terme) : retourne le type de terme : exemple : typeof("toto") retourne string (car c'est une chaîne de caractères)
2 bis / ici, if (typeof(NumSalle) : va être remplacer par if (string) si NumSalle est de type string.
2 ter / l'opérateur != signifie différent de
2 ... / typeof(terme) peut retourner "undefined" qui signifie que la variable n'existe pas.
fin 2 / première partie : SI la variable NumSalle n'est pas inexistante alors VRAI.
3/ le & qui signifie ET. En algèbre booléen pour que la finalité soit VRAI il faut que toutes les parties soient VRAI. Pour le moment, la première est calculée/
4/ NumSalle != null signifie qu'il doit y avoir une valeur dans cette variable et pas un élément vide. Si cette partie est VRAI alors toutes les parties sont VRAI et on entre dans les instructions du if
Fais des tests. Déclare des variables null, teste un typeof sur une variable qui n'existe pas.
- Edité par CristianoRolando 18 août 2021 à 16:25:37
Oui j'y fait des tours je trouve certaines choses et vais les tester, Merci pour l'explication ainsi que pour le Listener je vais de suite regarder ca.
Actuellement je cherchais comment je pourrais récupérer les id de mes groupes de salles pour les relier au bouton j'ai testé plusieurs choses mais rien ne fonctionne
Merci Sacha je vais regarder ca.
Hummm j'ai le même problème qu'avec Rolando erreur : "Uncaught SyntaxError: Unexpected identifier" pour la fonction colorize et du coup "Uncaught ReferenceError: colorize is not defined" sur les textonclik
Humm j'ai le même problème qu'avec Rolando erreur : "Uncaught SyntaxError: Unexpected identifier" pour la fonction colorize et du coup "Uncaught ReferenceError: colorize is not defined" sur les textonclik
- Edité par RemyDom il y a moins de 30s
Hum bizarre... Tu as bien rajouter la balise script à la fin du code html ?
Ah... effectivement par contre j'ai tout de même une erreur sur le .style et cette fois c'est pas mon orthographe
"Uncaught TypeError: Cannot set property 'fill' of undefined" ligne 31
J'aurais d'ailleurs une question, Est ce que des id avec des nom comme "GroupesSalles-1" "...-2" ect.. en reprenant le même principe ca fonctionneras ou pas ? les tiret et les chiffres ne pose pas problèmes dans l'id ? Sinon je n'ai pas de solution
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)