11540 sujets

JavaScript, DOM et API Web HTML5

Afficher/Cacher un élément

Bonjour, je débute sur javascript (j'ai quelques notion en html) et j'ai un petit exo à produire, mais je bloc sur la partie script js... (j'ai du mal à passer de l'abstrait aux lignes de codes)

J'ai comme contexte un formulaire qui propose un choix de glace entre 1 à 3 boules avec 12 parfums, 1 à 3 suppléments possible avec une exception (deux parfums qui ne peuvent être choisi en même temps).

Je voulais faire de la façon suivante :
des boutons radios, choix 1 à 3, si choix 2 ou 3 sélectionné alors on a le nombre de liste (select + option) qui correspond. Je voudrais donc qu'en arrivant sur la page on le choix 1 soit sélectionné et qu'une seule liste de choix de parfum soit dispo (les 2 et 3 devraient être caché).
Bon ça à l'air simple, sauf que je ne parviens pas à me dépatouiller avec le script JS...

j'ai lu à droite et à gauche des exemples à base de 
document.getElementById("exemple").style.display= 'block/none';

document.getElementById("exemple").style.visibility = "hidden";


Mais je ne trouve pas la bonne syntaxe

Help me please. Smiley confused
Salut Smiley smile

la première solution est la bonne Smiley smile 

document.getElementById("exemple").style.display= 'block/none';


ou exemple doit être l'id de ton select Smiley smile et tu fais le block ou le none selon la sélection Smiley smile
Modérateur
pchlj a écrit :
Salut Smiley smile

La première solution est la bonne Smiley smile


Non, puisque tout dépend du contexte Smiley cligne

En fait derrière la question se cache une mauvaise connaissance du CSS sur display et visibility. Un rendu vaut mieux qu'un long discourt, n'est pas ?


<!doctype html>
<html class="no-js" lang="fr">
<head>
	<meta charset="UTF-8">
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
	<title>J'aime Schnaps.it</title>
	<style>
		#displayNone{display:none; background-color:red;min-height:100px;}/*ne s'affichera pas*/
		#visibilityHidden{visibility: hidden; background-color:blue;min-height:100px;} /*prendra tout l'espace qu'occupe le contenu (noeuds enfants). Mais ne s'affichera pas.*/
	</style>
	
		
</head>
<body>
	

<p>Même si on se ment, après il faut s'intégrer tout ça dans les environnements et entre penser et dire, il y a un monde de différence et cette officialité peut vraiment retarder ce qui devrait devenir... Donc on n'est jamais seul spirituellement ! </p>

<p id="displayNone">Tu vois, tu vois au passage qu'il n'y a rien de concret car là, j'ai un chien en ce moment à côté de moi et je le caresse, et finalement tout refaire depuis le début. Ça respire le meuble de Provence, hein ? </p>

<p>You see, je ne suis pas un simple danseur car le cycle du cosmos dans la vie... c'est une grande roue puisque the final conclusion of the spirit is perfection C'est pour ça que j'ai fait des films avec des replicants. </p>

<p id="visibilityHidden">You see, je sais que, grâce à ma propre vérité on vit dans une réalité qu'on a créée et que j'appelle illusion et cette officialité peut vraiment retarder ce qui devrait devenir... Ça respire le meuble de Provence, hein ? </p>

<p>Quand tu fais le calcul, je sais que, grâce à ma propre vérité le cycle du cosmos dans la vie... c'est une grande roue et cette officialité peut vraiment retarder ce qui devrait devenir... C'est pour ça que j'ai fait des films avec des replicants. </p>

</body>
</html>

Pour ce que tu veux faire, il faut utiliser les évènements. Mais avant de vouloir dynamiser, je conseille fortement de bien connaître l'html et le css. Sinon c'est droit dans le mur (une partie de ce sujet).
Modifié par niuxe (23 Jan 2015 - 20:49)
niuxe a écrit :


Non, puisque tout dépend du contexte Smiley cligne



en effet c'est pas faux Smiley smile

disons simplement que le plus souvent pour l'apparition des select on privilégie le display sur le visibility puisque le visibility garde l'espace réservé alors que pas le display...

mais comme tu le dis si bien..cela dépend du contexte il peut parfois être utile de conserver l'espace Smiley smile
Merci pour vos réponses.

Je suis conscient que je fais appel à du CSS et que les bonnes pratiques préconisent de séparer contenu et mise en forme. C'est seulement les seules info que j'ai pu trouver aux premier abord en ce qui concerne ma problématique.

Donc vous sous entendez que mon problème doit être géré avec le CSS et non le JS ?
Peut être que je prends le problème dans le mauvais sens, qu'il y a mieux à faire ...

Le fait de cacher le champ est un choix de ma part, pas une contrainte de mon exo...
Je veux faire en sorte de proposer le bon nombre de choix en fonction de la sélection de l'utilisateur...

Peut être avez vous de meilleurs idées (j'ai confiance Smiley ravi )
J'imagine que la marge est trop grande pour que vous ayez plus de choses à dire sur ma question.

J'ai quand même un peu avancé tant bien que mal et je suis arrivé à un résultat qui "fonctionne" mais qui mérite des modifs, voici le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script>
	function selectaff(ind) {
		var sel1 = document.getElementById("sel1");
		var sel2 = document.getElementById("sel2");
		var sel3 = document.getElementById("sel3");
		sel1.style.visibility="hidden";
		sel2.style.visibility="hidden";
		sel3.style.visibility="hidden";
		if(ind=="1") sel1.style.visibility="visible";
		if(ind=="2") { sel1.style.visibility="visible"; sel2.style.visibility="visible"; }
		if(ind=="3") { sel1.style.visibility="visible"; sel2.style.visibility="visible"; sel3.style.visibility="visible"; }
		
	}
</script>
</head>

<body>
<form action="#" method="post" name="formtest">
	<label><input name="br" type="radio" value="1" onclick="selectaff('1');" />1 boule</label>
	<label><input name="br" type="radio" value="2" onclick="selectaff('2');" />2 boules</label>
	<label><input name="br" type="radio" value="3" onclick="selectaff('3');" />3 boules</label>
    
    <br />
    <br />
    <select name="sel1" size="7" id="sel1" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
    <select name="sel2" size="7" id="sel2" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
    <select name="sel3" size="7" id="sel3" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
</form>
</body>
</html>


Alors j'ai lu à plusieurs reprise qu'il fallait séparer le html/js/css...
Seulement je ne vois pas comment affecter un style grâce a une fonction...

On m'a parlé de addclass en jQuery, mais je n'en suis pas là je crois...
Modérateur
Demain, j'essaierai de te répondre plus longuement.
Sinon : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script>
	function selectaff(ind) {
		var sel1 = document.getElementById("sel1");
		var sel2 = document.getElementById("sel2");
		var sel3 = document.getElementById("sel3");
		sel1.style.visibility="hidden";
		sel2.style.visibility="hidden";
		sel3.style.visibility="hidden";
		if(ind=="1") sel1.style.visibility="visible";
		if(ind=="2") { sel1.style.visibility="visible"; sel2.style.visibility="visible"; }
		if(ind=="3") { sel1.style.visibility="visible"; sel2.style.visibility="visible"; sel3.style.visibility="visible"; }
		
	}
	//évènement chargement page (lorsque la page est chargée)
	window.onload = function(){
		//input radio
		var radios = document.getElementsByName('br');
		
		for (var i = 0 ; i < radios.length ; i++) {
			//lorsqu'on click sur le label (si c'est bien paramétré) ou sur l'input
			radios[ i ].onclick = function(e){
				//est ce que check ?
				if (this.checked == true) {
					//alors valeur du radio
					selectaff(this.value);
				}
			}
		}
	}
	
</script>
</head>

<body>
<form action="#" method="post" name="formtest">
	<label><input name="br" type="radio" value="1" />1 boule</label>
	<label><input name="br" type="radio" value="2" />2 boules</label>
	<label><input name="br" type="radio" value="3" />3 boules</label>
    
    <br />
    <br />
    <select name="sel1" size="7" id="sel1" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
    <select name="sel2" size="7" id="sel2" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
    <select name="sel3" size="7" id="sel3" style="visibility:hidden">
    	<option>vanille</option>
    	<option>chocolat</option>
    	<option>menthe</option>
    	<option>café</option>
    	<option>praliné</option>
    	<option>cassis</option>
    	<option>fraise</option>
    </select>
</form>
</body>
</html>

Modifié par niuxe (26 Jan 2015 - 23:02)
Sujet clos
Aller à