11499 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changement d'une classe

Bonjour,
Je cherche à afficher des questions Q1 et Q2 et ensuite à afficher les réponses R1 et R2 quand je clique sur Q1 et Q2 , le tout en javascript
J'ai donc créé 4 paragraphes: Q1 R1 Q2 et R2.
Avec du css je cache R1 et R2
puis avec le javascript je veux changer la classe des réponses
mais ça ne fonctionne pas, pourriez me dire où est mon erreur svp?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link rel="stylesheet" href="moncss.css" />
        <script type="text/javascript" src="monjs.js"></script>
    </head>
 
    <body>
     <div>
     	<p class="Q" onclick="montrer()">Q1</p>
     	<p class="R1" name="rep">R1</p>
     	<p class="Q" onclick="montrer()">Q1</p>
     	<p class="R1" name="rep">R2</p>
     </div>
    </body>
</html>




.Q{
	background-color:green;
}

.R1{
	background-color:yellow;
	visibility:hidden;
}

.R2{
	background-color:yellow;
	visibility:visible;
}




function montrer(){
	var reponses=document.getElementsByClassName("rep");
	reponses.className="R2";
}


PS: c'est un exo d'entrainement personnel , je compte le faire ensuite en jquery
Première erreur: tu as des <p ... name="rep"> qui ne font aucun sens, et aucun élément affublé de la classe rep. Donc document.getElementsByClassName ne peut rien te retourner.

Deuxième erreur: document.getElementsByClassName te retourne une collection, tu dois la parcourir pour attribuer une valeur au className de chacun des éléments un par un, tu ne peux pas le faire en une fois en modifiant la valeur d'une propriété de la collection (enfin si, tu peux, mais ça ne fait rien du tout, la seule propriété dont dispose une collection est length et les éléments indexés numériquement ou éventuellement par id).
merci en tenant de tes remarques
j'ai mis un getElementsByName et j'ai créé une boucle for et là ça fonctionne mieux

function montrer(){
	var reponses=document.getElementsByName("rep");
	for (var i = 0; i< 2; i=i+1){
	  reponses[i].className="R2";
	};
}


le seul souci est que quand je clique sur Q1 j'obtiens les réponses R1 et R2 et pas uniquement R1 , je ne vois pas pourquoi[/i]
Salut,

comme te l'a dit Quentin et comme on peut le deviner par leur nom les méthodes se nommant getElements... retournent des collections (=des listes d'éléments) et non pas un élément unique. Or c'est ce qu'il te faudrait faire et donc tu pourrais plutôt utiliser un id et non pas une classe (cf. Quelle est la différence entre une classe et un id ?) pour retrouver les bons éléments à cibler.

Par exemple :
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
		<style type="text/css" media="screen">
			.question {
				background-color: green;
				cursor: pointer;
			}
			.reponse {
				background-color: yellow;
				visibility: hidden;
			}
			.reponse_ok {
				visibility: visible;
			}
		</style>
		<script type="text/javascript">
			function montrer(elem){
				document.getElementById(elem).className += " reponse_ok";
			}
		</script>
    </head>
 
    <body>
     <div>
     	<p class="question" onclick="montrer('reponse_1')">Question 1</p>
     	<p class="reponse" id="reponse_1">Réponse 1</p>
     	<p class="question" onclick="montrer('reponse_2')">Question 2</p>
     	<p class="reponse" id="reponse_2">Réponse 2</p>
     </div>
    </body>
</html>

Modifié par Heyoan (09 Aug 2013 - 13:26)
ok j'ai compris le principe de ton code à part le += dans la balise script.
J'ai donc refait par moi même ce que tu avais fait et ça ne fonctionne pas.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link rel="stylesheet" href="moncss.css" />
        <script type="text/javascript" src="monjs.js"></script>
    </head>
 
    <body>
     <div>
     	<p class="question" onclick="montrer(reponse_1)">Q1</p>
     	<p class="reponse" id="reponse_1">R1</p>
     	<p class="question" onclick="montrer(reponse_2)">Q2</p>
     	<p class="reponse" id="reponse_2">R2</p>
     </div>
    </body>
</html>




.question{
	background-color:green;
}

.reponse{
	background-color:yellow;
	visibility:hidden;
}

.reponse_ok{
	visibility:visible;
}




function montrer(arg){
	var reponse=document.getElementById("arg");
	reponse.className="reponse_ok";
}
ton code fonctionne nickel
mais je ne vois pas où est mon erreur , j'ai pourtant l'impression de faire pareil.
j'ai l'impression que c'est onclick="montrer(réponse_1) qui posent souci
tu as mis des ' et moi rien.
et si je teste ton code avec " au lieu de ' ton code ne fonctionne plus
désolé encore un message... j'aurais dû plus réfléchir avant d'écrire
mon code fonctionne avec onclick="montrer('reponse1_')"
et en js

function montrer(arg){
	var reponse=document.getElementById(arg);
	reponse.className="reponseok";
}


le seul truc qui me semble étrange c'est que ça ne marche pas en faisant onclick="montrer("reponse1_")"
je pensais que pour les string " ou ' c'était pareil mis à part quand on a une expression qui contient déjà '

merci
Hem... Il vaut vraiment revoir les bases... Smiley murf

dans la fonction suivante :
function montrer(elem){
	document.getElementById(elem).className += " reponse_ok";
}
elem est un paramètre qui est reçu lors de l'appel et qui est remplacé ensuite par la bonne valeur. Du coup si je mets :
onclick="montrer('reponse_1')"
j'appelle la fonction montrer en passant comme argument (ou paramètre) la valeur reponse_1 qui sera utilisée dans la fonction pour retrouver l'élément qui a pour id (getElementById) reponse_1.
En mettant :
onclick="montrer(reponse_1)"
la fonction montrer est appelée en passant comme paramètre la valeur de la variable reponse_1... qui n'existe pas.

Le += permet de concaténer. C'est une écriture simplifiée :
var maString = 'toto';
maString += ' et titi';
correspond à 
var maString = 'toto';
maString = maString + ' et titi';
Du coup l'espace est important puisque je cherche à rajouter la classe reponse_ok pour avoir au final 
<p class="reponse reponse_ok" id="reponse_1">Réponse 1</p>
alors qu'avec ton code on a une classe reponsereponse_ok... qui n'existe pas
On s'est croisés...

mathier a écrit :
le seul truc qui me semble étrange c'est que ça ne marche pas en faisant onclick="montrer("reponse1_")"
je pensais que pour les string " ou ' c'était pareil mis à part quand on a une expression qui contient déjà '

Cela aussi est la base : on définit la valeur d'une chaine de caractères en la mettant entre quotes (') ou entre double quotes ("). Du coup on ne peut pas utiliser dans le premier cas une quote au beau milieu de la chaine (ou une double quote dans le second cas) puisque cela signifie la fin de la chaine... à moins de l'échapper avec le caractère (\).

Les écritures suivantes sont correctes :
var maString = 'toto';
alert(maString);

var maString = "toto";
alert(maString);

var maString = "il l'avait bien cherché";
alert(maString);

var maString = 'il l\'avait bien cherché';
alert(maString);

var maString = "c'est un peu \"bizarre\" non ?";
alert(maString);
mais pas celles-ci :
var maString = 'il l'avait bien cherché';
var maString = "c'est un peu "bizarre" non ?";

Modifié par Heyoan (09 Aug 2013 - 15:19)
merci pour ton aide, j'ai compris.
le pire c'est que toutes les bases dont tu me parles je les connais et je ne tilte pas .
Je manque de pratique.
mathier a écrit :
merci pour ton aide, j'ai compris.
Tu es le bienvenu ! Smiley jap
mathier a écrit :
le pire c'est que toutes les bases dont tu me parles je les connais et je ne tilte pas .
Je manque de pratique.
Eh oui ! Tout le monde en passe par là... Smiley ravi
Sujet clos
Aller à