Bonjour,
il y a tellement de chose à dire que je ne sais par quoi commencer, même si Beginner. t'en a déjà pas mal dit 
Concernant le HTML :
ou encore
1
2
3
| <center>
<!-- suite -->
</center> |
ne devrait plus trouver leur place dans du code HTML
• Lorsqu'il y a le choix entre plusieurs options on utilise <input type="checkbox"....
• Lorsque le choix est cette option OU cette autre option on utilise <input type="radio"..., en mettant le même name pour que le cochage/décochage soit fait de façon automatique, il ne faut pour autant en oublier une option neutre au cas où.
Dans tous les cas il ne faut oublier de mettre une value.
Concernant le CSS :
Il est préférable de passer par une feuille de style ou encore de mettre tout cela entre les balises <style></style> de la page et faire tout son possible pour ne pas surcharger le code HTML, il en va de la lisibilité, de la maintenabilité de ton code.
Concernant le javascript :
Il te faut entrevoir que la moindre erreur met en vrac la suite de ton code, il est donc préférable de tester tes différents morceaux de code indépendamment les uns des autres.
Concernant tes affichages/masquages d'éléments, cela peut se faire de façon plus « simple » en utilisant les names ou encore en passant par une classe commune pour les éléments liés entre eux et surtout de ne pas se gêner d'utiliser les dataset, forme data-target="id_liee", par exemple
1
2
3
4
5
| <input type="radio" data-target="plongee_n0" name="niveau_plongee">aucun
<input type="radio" data-target="plongee_n1" name="niveau_plongee">le niveau 1
<input type="radio" data-target="plongee_n2" name="niveau_plongee">le niveau 2
<input type="radio" data-target="plongee_n3" name="niveau_plongee">le niveau 3
<input type="radio" data-target="plongee_n4" name="niveau_plongee">le niveau 4 |
dans ce bout de code data-target indique l'id de l'élément devant être affiché si le radio est coché, ne pas mettre de return false dans ce cas l'action par défaut ne serait pas réalisée, ce que l'on peut voir dans ton code un peu partout.
Ensuite c'est un jeu d'enfant, ou presque, que de faire une fonction générique traitant de ce qu'il y a à faire pour afficher/masquer les différents éléments liés.
En gros cela pourrait donner cela :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| // une fois le document constitué
document.addEventListener("DOMContentLoaded", function() {
// récup. des éléments <radio>
var oRadios = document.querySelectorAll('[type=radio]');
var i, nb = oRadios.length;
for (i = 0; i < nb; i += 1) {
// affectation action sur le click
oRadios[i].onclick = function (e) {
// récup. du name
var name = this.name;
// si il a un name
if (name) {
// recherche les radios du même nom
var memeName = document.querySelectorAll('[name=' + name + ']');
var j, nbj = memeName.length;
// parcours <radio> du même name
for (j = 0; j < nbj; j += 1) {
// récup. id cible
var target = memeName[j].dataset.target;
// récup. état <radio>
var isChecked = memeName[j].checked;
// si cible trouvée
if (target) {
var oElem = document.getElementById(target);
// si élément existe
if (oElem) {
oElem.style.display = isChecked ? 'block' : 'none';
}
}
}
}
};
}
}); |
voilà déjà pour un début...
Comment faire pour montrer une partie HTML et cacher une autre
Répondre avec citation
Envoyé par Eddoul
Partager