11521 sujets

JavaScript, DOM et API Web HTML5

Ne pas devoir recréer un script pour chaque <div>

Bonjour,

J'ai un code pour changer le background d'un <div> en cliquant sur un lien, cependant j'aimerais ne pas devoir à chaque fois recréer un autre script javascript pour un autre <div>.

Voici mon code :

<html>
<head>

<style>
a {
    background: white;
    color: black
}

b {
    background: white;
    color: black
}
</style>

</head>

<body>

<!-- script TEXTE1 -->

<script>function green1() {
document.getElementById("a").style.background = "green";}
</script>

<script>function red1() {
document.getElementById("a").style.background = "red";}
</script>

<!-- script TEXTE2 -->

<script>function green2() {
document.getElementById("b").style.background = "green";}
</script>

<script>function red2() {
document.getElementById("b").style.background = "red";}
</script>

<!-- Lien pour changer le background du TEXTE1 -->

<a onclick="green1()">Vert</a> - <a onclick="red1()">Rouge</a>

<div id="a">TEXTE1</div><br /><br />

<!-- Lien pour changer le background du TEXTE2 -->

<a onclick="green2()">Vert</a> - <a onclick="red2()">Rouge</a>

<div id="b">TEXTE2</div><br /><br />

</body>

</html>


Merci d'avance pour votre aide.
Un membre m'a conseillé ce code, c'est ce que je recherchais :

<html><head>
 
<style>
a {
    background: white;
    color: black
}
 
b {
    background: white;
    color: black
}

c {
    background: white;
    color: black
}

</style>
 
</head>
 
<body>
 
<!-- Lien pour changer le background du TEXTE1 -->
 
<a onclick="changeColor('a','green')">Vert</a> - <a onclick="changeColor('a','red')">Rouge</a>
 
<div id="a">TEXTE1</div><br /><br />
 
<!-- Lien pour changer le background du TEXTE2 -->
 
<a onclick="changeColor('b','green')">Vert</a> -   <a onclick="changeColor('b','red')">Rouge</a>
 
<div id="b">TEXTE2</div><br /><br />

<!-- Lien pour changer le background du TEXTE3 -->
 
<a onclick="changeColor('c','green')">Vert</a> -   <a onclick="changeColor('c','red')">Rouge</a>
 
<div id="c">TEXTE2</div><br /><br />

<script>
  function changeColor(elementId, color){
    document.getElementById(elementId).style.backgroundColor = color
  }
</script>  
 
</body>
 
</html>
Bonjour,

Pourquoi utiliser des éléments <a> vides ? Des éléments tel que <button> remplissent cette fonction de manière bien plus propre et accessible (peut-être d'anciennes habitudes de codeurs d'avant html5...).

PS : Il y a une confusion entre éléments et ids dans le code css : en css il faut mettre un dièse devant l'id. De plus, 'background: white' ne sert pas à grand chose dans ce cas précis puisque par défaut le fond est blanc. Donc...

Le code aurait pu être factorisé comme ceci :
#a,
#b,
#c {  /* cible toutes les ids référencées ici */
    color: black
}

Ou mieux encore, en ceci :
a { /* cible tous les liens */
    color: black
}
salut,
déjà j'aurais dit comme Olivier C , préférer les éléments <button> lorsqu'il s'agit de ce genre d'actions (ils peuvent être mis en forme en css...). De plus, tes éléments <a> étaient invalides vu qu'ils doivent impérativement contenir un attribut href non vide.

Si non pour revenir à ton code, je pense qu'il faut apprendre à faire plus propre d'emblée et créer des scripts JS plus généralisables et plus facilement maintenables.
On peut imaginer différents systèmes pour faire ce que tu cherches, on peut passer par les attributs "data-" et appliquer une couleur ou bien se fier au contenu des boutons où c'est peut être plus contraignant vu que le bouton doit contenir "vert" ou "rouge".
Modérateur
Bonjour,

Zelalsan a écrit :
De plus, tes éléments &lt;a&gt; étaient invalides vu qu'ils doivent impérativement contenir un attribut href non vide.


J'en vois régulièrement qui font quelques confusions à propos de la balise <a>.

Vous avez raison de souligner qu'historiquement la balise <a> servait d'ancre (sans attribut "href" donc), et vous avez raison de souligner que cet usage est désormais obsolète.

Par contre, il est inexact de dire qu'un <a> sans attribut "href" est invalide. C'est même expressément prévu dans la norme html5. Voir https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

D'une manière générale, je pense qu'on va voir de plus en plus la balise <a> sans href dans les HTML et ceci pour plusieurs raisons :
1) Les boutons sont difficiles à styler
2) On a souvent des "listes" d'action qui mélangent des boutons-liens avec des boutons dont l'action fait rester dans la page en cours. Et dans ces cas-là, utiliser des <a> sans href n'est pas idiot.

Amicalement,
Modifié par parsimonhi (24 Jan 2016 - 11:28)
Modérateur
Bonjour,

Ceci étant, sémantiquement, ici, il faut des <button> et pas des <a>. On est d'accord là dessus.

Amicalement,
parsimonhi a écrit :
Par contre, il est inexact de dire qu'un <a> sans attribut "href" est invalide.

Alors merci parsimonhi tu viens de me faire lire des tas de trucs Smiley fache Smiley langue . Je viens donc de me rendre compte qu'en HTML5, l'attribut href n'est pas obligatoire pour les éléments <a> et <area>. De plus, en testant avec le validateur (est-ce fiable ? Smiley ohwell ) un élément <a> avec un href vide n'est pas signalé comme étant une erreur.

Par contre les éléments <a> sans href sont des "placeholder links" et ils ne sont pas plus clairs que ça sur ce que représente explicitement ces derniers.
L'exemple donné dans les specs est très pertinent : un lien sans href dans un menu où on aurait mis à autre une époque un <span> à la place. D'accord sur ce point, je pourrais plus ou moins comprendre mais dans les grandes lignes, je ne trouve pas une grande utilité à ça. Peut être qu'on pourra me convaincre du contraire...

Ce qu'on pourrait craindre surtout, ça serait l'abus qui pourrait en fait. Un lien sans href représenterait un élément qui aurait pu être un lien... Ça m'a l'air assez vaste...
Hormis l'exemple cité dans les specs, rien ne m'a vraiment convaincu de ce que j'ai pu lire à droite à gauche.
Zelalsan a écrit :
On peut imaginer différents systèmes pour faire ce que tu cherches, on peut passer par les attributs "data-" et appliquer une couleur...

Alors là Zelalsan merci !

En effet, en cherchant à répondre à Etan sur la partie js pour m'entrainer j'ai cherché à créer un script en vanilla js. Je partais du même code html que toi, avec des attributs 'data-color' pour moi aussi. Mais je suis resté bloqué au niveau de la boucle for : même après avoir compris qu'un 'getElementsByClassName' (ou dans ton cas un 'querySelectorAll') retourne un tableau je n'arrivais pas à créer correctement ma boucle for pour récupérer les valeurs. Et là, hop : tu me fournis la solution sur un plateau.

PS : je n'avais jamais remarqué non plus que la boucle for pouvait se passer d'accolades...
@Olivier C> je t'en prie. En fait la boucle sert à attacher tout bêtement une écoute d'évènement et l'élément qui déclenche l'évènement se récupère simplement par this à l'intérieur du callback.

Olivier C a écrit :
je n'avais jamais remarqué non plus que la boucle for pouvait se passer d'accolades...

En fait il est possible d'avoir cette écriture uniquement lorsqu'on a une seule instruction qui suit. C'est aussi applicable à tout bloque d'instructions. Par contre c'est peut être une mauvaise pratique que j'ai de faire ça mais bon...
La plupart des langages de programmation autorisent l'absence de délimiteur dès lors que l'instruction conditionnelle ne comporte qu'une seule assignation ou appel de fonction.
Ce n'est pas une erreur donc et le développeur est libre de l'utiliser ou non (après tout, cela peut faire gagner jusqu'à 5 caractères en comptant les sauts de ligne).
En fait, le seul critère me semble être celui de la lisibilité du code par quelqu'un d'autre intervenant a posteriori.
Si le suivi est manuel, la lisibilité et la compréhension la plus efficace doivent être recherchées.
A contrario, si le code est généré par un outil quelconque et susceptible d'être écrasé par une nouvelle sérialisation, alors la firme la plus compacte peut / doit être privilégiée.
Sujet clos
Aller à