11286 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
Je perds l'indentation (classe css) sur une action hide : show

J'ai 2 classes qui ne diffèrent que sur width, pour faire une indentation.
Mes 2 fonctions fonctionnent correctement sur diverses classes, sauf sur .Appuhn_2 (width: 62em;)
Le hide fonctionne correctement
Le show me redonne le texte mais avec la classe .Appuhn (width: 72em;)

Je sèche sur le pb depuis des heures Smiley decu
Merci d'avance pour vos suggestions !

https://zupimages.net/viewer.php?id=21/20/2l36.png
https://zupimages.net/viewer.php?id=21/20/bwji.png
<INPUT TYPE="button" style="width:125px; height:25px; font-size:15px;" VALUE="Appuhn" title="Appuhn" onClick="AffMas('Z','Appuhn_2')">


.Appuhn {
/*	border: 1px solid #D5FFFF; */
	text-align: left;
	width: 72em;
	line-height: 1.8em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin: auto;
}
.Appuhn_2 {
/*	border: 1px solid #D5FFFF; */
	text-align: left;
	width: 62em;
	line-height: 1.8em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin: auto;
}


// Utilisé pour Afficher/Masquer en récupérant la place
var action = false;
function AffMas(){
var hide = " Cache";
var show = "";
var Arg = arguments;
var Obj;
var Obj = new Array();
	action = !action;	
	
	// Arg[0] = 'Z' poire pour la soif
	for ( var i=1; i< Arg.length; i++){
		Masquer(Arg[0],Arg[i]);
	}
}

function Masquer(){
var hide = " Cache";
var show = "";
var Arg = arguments;
var Obj = new Array();
var Txt = "";
var RefObj = "";
	
	alert("MASQUER=" + Arg[1] + "-");

	if (Arg[1] == 'Entete' ){
		Obj = window.document.getElementById(Arg[1]);
		if (Obj) {
			Obj.className=(action ? hide : show);
		}
		action = !action;	
		return 0;
	}
	if (Arg[1] == 'Latin' ){
		Txt = "L_";
	}
	if (Arg[1] == 'Appuhn' ){
		Txt = "A_";
	}
	if (Arg[1] == 'Appuhn_2' ){
		Txt = "AI_";
	}
	
	if (Arg[1] == 'Saisset' ){
		Txt = "S_";
	}
	if (Arg[1] == 'Koyré' ){
		Txt = "K_";
	}
	
	for (i=1;i<20;i++){
		RefObj = Txt + i;
		
		//alert("REFOBJ="+ RefObj +"-");
		
		Obj = window.document.getElementById(RefObj);
		if (Obj) {
			alert(window.document.getElementsByClassName);
			Obj.className=(action ? hide : show);
		}
	}
}

<p id="A_17" class="Appuhn">
<b>(A_17)</b> Pendant toutefois que nous sommes occupés de cette poursuite et travaillons à maintenir notre entendement dans la voie droite, il est nécessaire que nous vivions ; nous sommes donc obligés avant tout de poser certaines règles que nous tiendrons pour bonnes et qui sont les suivantes.
</p>

<p id="AI_1" class="Appuhn_2">
<b>I.</b> Mettre nos paroles à la portée du vulgaire et faire d'après sa manière de voir tout ce qui ne nous empêchera pas d'atteindre notre but : nous avons beaucoup à gagner avec lui pourvu, qu'autant qu'il se pourra, nous déférions à sa manière de voir et nous trouverons ainsi des oreilles bien disposées à entendre la vérité.
</p>

<p id="AI_2" class="Appuhn_2">
<b>II.</b> Des jouissances de la vie prendre tout juste ce qu'il faut pour le maintien de la santé.
</p>

<p id="AI_3" class="Appuhn_2">
<b>III.</b> Rechercher enfin l'argent, ou tout autre bien matériel, autant seulement qu'il est besoin pour la conservation de la vie et de la santé et pour nous conformer aux usages de la cité, en tout ce qui n'est pas opposé à notre but.
</p>

<p id="A_18" class="Appuhn">
<b>(A_18)</b> Ces règles posées, je me mets en route et m'attache d'abord à ce qui doit venir le premier, c'est-à-dire à réformer l'entendement et à le rendre apte à connaître les choses comme il est nécessaire pour atteindre notre but. Pour cela, l'ordre tiré de la nature exige que je passe en revue tous les modes de perception dont j'ai usé jusqu'ici pour affirmer ou nier avec assurance, afin de choisir le meilleur et de commencer du même coup à connaître mes forces et ma nature que je désire porter à sa perfection.
</p>

<p id="A_19" class="Appuhn">
<b>(A_19)</b> En y regardant attentivement, le mieux que je puisse faire est de ramener à quatre tous ces modes.
</p>

Modifié par dmganges (20 May 2021 - 05:33)
Salut, quel résultat souhaites-tu obtenir ?
Si je m'avance un peu, c'est d'afficher ou masquer des paragraphes correspondants à des boutons, c'est bien ça ?
Si c'est le cas, la manière de faire est très compliquée et il y a beaucoup plus simple.
Bonjour MatthieuR, et merci de t'intéresser à mon sujet.
Oui c'est exactement çà, Masquer/Afficher des parties de texte en récupérant la place libérée, c'est-à-dire sans qu'il y ait du blanc à la place de(s) l'élément(s) supprimé(s). Là en gros c'est pour pouvoir comparer facilement différentes version d'un même texte qui se trouve sur une seule page html. Il est aussi important pour moi que le texte effacé ne soit plus pris en compte par la recherche sur la page avec <Ctrl>F, il faut que le nombre d'occurrences trouvées corresponde au texte affiché et non à la totalité du document.

J'étais parti sur une sélection avec getElementById car je n'obtenais pas de bon résultat avec getElementsByClassName et action sur Obj[j].style.visibility.

Je fais très peu de html/javascript juste pour des besoins ponctuels, je ne suis pas très doué...
Je suis bien sûr preneur de toute autre solution.
Me revoilà Smiley smile

Je suis arrivé par hasard à une solution qui tombe juste Smiley lol , mais je dois faire différemment suivant que le hide/show porte sur un <div> ou un <p>

Ça me convient tout à fait, je marque le sujet Résolu, mais je suis toujours preneur d'autres solutions plus élégantes s'il y a...
Je suis un peu pommé avec toutes les façons différentes de Masquer/Afficher... suivant la sélection ClassName/ById et suivant <div>/<p>/... que je fais...

Le css et le texte du document ne changent pas.
Le nouveau code pour info :

<INPUT TYPE="button" style="width:125px; height:25px; font-size:15px;" VALUE="Entête" title="Entete" onClick="AffMas('Z','Entete')">
...
<INPUT TYPE="button" style="width:125px; height:25px; font-size:15px;" VALUE="Appuhn" title="Appuhn" onClick="AffMas('Z','Appuhn','Appuhn_2')">
...
<div id="Entete">
<p class="Saut_1">
<h2>
TRAITÉ DE LA RÉFORME DE L'ENTENDEMENT
</h2>
...
<p id="A_17" class="Appuhn">
<b>(A_17)</b> Pendant toutefois que nous sommes occupés de cette poursuite et travaillons à maintenir notre entendement dans la voie droite, il est nécessaire que nous vivions ; nous sommes donc obligés avant tout de poser certaines règles que nous tiendrons pour bonnes et qui sont les suivantes.
</p>

<p id="AI_1" class="Appuhn_2">
<b>I.</b> Mettre nos paroles à la portée du vulgaire et faire d'après sa manière de voir tout ce qui ne nous empêchera pas d'atteindre notre but : nous avons beaucoup à gagner avec lui pourvu, qu'autant qu'il se pourra, nous déférions à sa manière de voir et nous trouverons ainsi des oreilles bien disposées à entendre la vérité.
</p>
...


// Utilisé pour Afficher/Masquer en récupérant la place
function AffMas(){
var Arg = arguments;
var Obj = new Array();
	
	// Arg[0] = 'Z' poire pour la soif
	if (Arg[1] == 'Entete' ){
		Obj = window.document.getElementById(Arg[1]);
		if(getComputedStyle(Obj).display != "none"){
    	Obj.style.display = "none";
  	} else {
    	Obj.style.display = "block";
		}
		return 0;
	}
	for ( var i=1; i< Arg.length; i++){
		Masquer(Arg[0],Arg[i]);
	}
}

function Masquer(){
var Arg = arguments;
var Obj = new Array();
var Txt = "";
var RefObj = "";
	if (Arg[1] == 'Latin' ){
		Txt = "L_";
	}
	if (Arg[1] == 'Appuhn' ){
		Txt = "A_";
	}
	if (Arg[1] == 'Appuhn_2' ){
		Txt = "AI_";
	}
	
	if (Arg[1] == 'Saisset' ){
		Txt = "S_";
	}
	if (Arg[1] == 'Koyré' ){
		Txt = "K_";
	}
	
	for (i=1;i<20;i++){
		RefObj = Txt + i;
		Obj = window.document.getElementById(RefObj);
		if(getComputedStyle(Obj).display != "none"){
    	Obj.style.display = "none";
  	} else {
    	Obj.style.display = "block";
		}
	}
}

Modifié par dmganges (20 May 2021 - 08:51)
Juste pour marquer résolu, (pour moi), je n'arrivais pas à cocher sans mettre du texte ici ?
J'en profite pour modifier le titre du sujet... un peu plus clair !
Modifié par dmganges (20 May 2021 - 05:34)