Comment changer la couleur du fond en javascr
soniadébutante2011
-
sheik54 Messages postés 76 Date d'inscription Statut Membre Dernière intervention -
sheik54 Messages postés 76 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voilà, j'ai un travail à rendre lundi, et je dois faire une programmation qui puisse me permettre lorsque je clic sur un mot précis le fond devient rouge
L'énoncé c'est comme suit: En fonction de l'élément de la dernière liste cliqué, changer en rouge le fond des éléments concernés. Il n'est pas nécessaire de modifier le code HTML fourni.
le programme c'est comme suit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Éléments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
function changeFond(elt)
{
<span onclick="this.style.backgroundColor='red'"></span>
document.getElementById(elt).style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Titre h1</h1>
<h2>Premier titre h2</h2>
<p>Paragraphe avec du <em>texte important</em>, du <strong>texte encore plus important</strong>... Et maintenant <em>une liste</em> !</p>
<ol>
<li>premier item</li>
<li>deuxième item</li>
<li>troisième item</li>
</ol>
<h2>Deuxième titre h2</h2>
<p>Petit paragraphe introductif</p>
<table summary="" >
<caption>Tableau de 3 lignes et 3 colonnes</caption>
<tr>
<td>Rien</td>
<th scope="col" id="c1">Titre de colonne</th>
<th scope="col" id="c2">Titre de colonne</th>
</tr>
<tr>
<th scope="row" id="l1">Titre de ligne</th>
<td id="t11">Rien</td>
<td id="t12">Rien</td>
</tr>
<tr>
<th scope="row" id="l2">Titre de ligne</th>
<td id="t21">Rien</td>
<td id="t22">Rien</td>
</tr>
</table>
<h2>Troisième titre</h2>
<p>Changer la couleur de fond...</p>
<ul>
<li <span onClick="changeFond('p')='red'">des paragraphes</span></li>
<li onClick="changeFond('h2')">des titres h2</li>
<li onClick="changeFond('li')">des items de liste li</li>
</ul>
</body>
</html>
Voilà, j'ai un travail à rendre lundi, et je dois faire une programmation qui puisse me permettre lorsque je clic sur un mot précis le fond devient rouge
L'énoncé c'est comme suit: En fonction de l'élément de la dernière liste cliqué, changer en rouge le fond des éléments concernés. Il n'est pas nécessaire de modifier le code HTML fourni.
le programme c'est comme suit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Éléments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" >
function changeFond(elt)
{
<span onclick="this.style.backgroundColor='red'"></span>
document.getElementById(elt).style.backgroundColor = "red";
}
</script>
</head>
<body>
<h1>Titre h1</h1>
<h2>Premier titre h2</h2>
<p>Paragraphe avec du <em>texte important</em>, du <strong>texte encore plus important</strong>... Et maintenant <em>une liste</em> !</p>
<ol>
<li>premier item</li>
<li>deuxième item</li>
<li>troisième item</li>
</ol>
<h2>Deuxième titre h2</h2>
<p>Petit paragraphe introductif</p>
<table summary="" >
<caption>Tableau de 3 lignes et 3 colonnes</caption>
<tr>
<td>Rien</td>
<th scope="col" id="c1">Titre de colonne</th>
<th scope="col" id="c2">Titre de colonne</th>
</tr>
<tr>
<th scope="row" id="l1">Titre de ligne</th>
<td id="t11">Rien</td>
<td id="t12">Rien</td>
</tr>
<tr>
<th scope="row" id="l2">Titre de ligne</th>
<td id="t21">Rien</td>
<td id="t22">Rien</td>
</tr>
</table>
<h2>Troisième titre</h2>
<p>Changer la couleur de fond...</p>
<ul>
<li <span onClick="changeFond('p')='red'">des paragraphes</span></li>
<li onClick="changeFond('h2')">des titres h2</li>
<li onClick="changeFond('li')">des items de liste li</li>
</ul>
</body>
</html>
A voir également:
- Comment changer la couleur de son bitmoji
- Changer dns - Guide
- Changer la couleur de la barre des taches - Guide
- Changer de carte graphique - Guide
- Comment changer la couleur de whatsapp - Accueil - Messagerie instantanée
- Excel cellule couleur si condition texte - Guide
1 réponse
Bonjour,
Pour cela tu as 2 choix. Soit tu passe par l'élément JavaScript
Soit tu passe par une classe (mais dans ce cas là il faut modifier le code HTML.
De plus, les lignes suivantes sont fausses :
Pour chaque ligne voici la ligne corrigée :
Voici donc en dessous la page qui fonctionne. Je te conseille très fortement de lire et de comprendre toute la page avant lundi ;)
Pour cela tu as 2 choix. Soit tu passe par l'élément JavaScript
getElementsByTagName.
Soit tu passe par une classe (mais dans ce cas là il faut modifier le code HTML.
De plus, les lignes suivantes sont fausses :
<span onclick="this.style.backgroundColor='red'"></span>
document.getElementById(elt).style.backgroundColor = "red";
<li <span onClick="changeFond('p')='red'">des paragraphes</span></li>
Pour chaque ligne voici la ligne corrigée :
Ligne 1 : Cette ligne n'existe pas en javascript, c'est du code HTML Ligne 2 : Tu veux modifier la couleur de fond de l'élément dont le ID est le champs que tu donnes. Ceci est faux, tu veux changer la couleur de tout les éléments que tu passe en paramètres suivant leur types. Ligne 3 : Tu ne ferme pas la balise li et tu ouvre la balise span. C'est complétement faux : <li onClick="changeFond('p')='red'">des paragraphes</li> serais mieux.
Voici donc en dessous la page qui fonctionne. Je te conseille très fortement de lire et de comprendre toute la page avant lundi ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Éléments</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" >
function changeFond(elt){
var node_list = document.getElementsByTagName(elt);
for (var i = 0; i < node_list.length; i++) {
node_list[i].style.backgroundColor = 'red';
}
}
</script></head>
<body>
<h1>Titre h1</h1>
<h2>Premier titre h2</h2>
<p>Paragraphe avec du <em>texte important</em>, du <strong>texte encore plus important</strong>... Et maintenant <em>une liste</em> !</p>
<ol>
<li>premier item</li>
<li>deuxième item</li>
<li>troisième item</li>
</ol>
<h2>Deuxième titre h2</h2>
<p>Petit paragraphe introductif</p>
<table summary="" >
<caption>Tableau de 3 lignes et 3 colonnes</caption>
<tr>
<td>Rien</td>
<th scope="col" id="c1">Titre de colonne</th>
<th scope="col" id="c2">Titre de colonne</th>
</tr>
<tr>
<th scope="row" id="l1">Titre de ligne</th>
<td id="t11">Rien</td>
<td id="t12">Rien</td>
</tr>
<tr>
<th scope="row" id="l2">Titre de ligne</th>
<td id="t21">Rien</td>
<td id="t22">Rien</td>
</tr>
</table>
<h2>Troisième titre</h2>
<p>Changer la couleur de fond...</p>
<ul>
<li onClick="changeFond('p');">des paragraphes</a></li>
<li onClick="changeFond('h2')">des titres h2</li>
<li onClick="changeFond('li')">des items de liste li</li>
</ul>
</body>
</html>
