Masquer les composants d'une div
Bonjour,
J'ai crée un bouton zone de texte qui, quand on clique dessus, permet la création d'une zone de texte dans une div nommée "en-dessous".
Or il se trouve qu'auparavant, j'ai cliqué sur un bouton "label" qui, quand on clique dessus , permet l'affichage dans la même div "en-dessous", d'un libellé.
Il se trouve que le libellé reste affiché dans la div "en-dessous" lorsque je clique sur le bouton "zone de texte", ce que je ne souhaite pas.
Pouvez-vous me dire comment faire disparaître ce libellé créé par le click sur le bouton "label" pour que la div "en-dessous" soit "propre" pour faire apparaître seulement une zone de texte .
voici le code de la page html "generateur de formulaire"
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
#gauche {
float: left;
width: 70%;
height: 1000px;
background-color: #EFECCA;
}
#droite {
background-color:#CEFFF8;
height: 300px;
padding: 10px;
padding-left: 70%;
text-align:justify;
}
#en-dessous {
background-color:#CEFFF8;
height: 1000px;
padding : 10px;
padding-left: 70%;
text-align:justify;
}
#right {
position: absolute;
width: 70%;
border: 2px solid #000000;
}
</style>
</head>
<body>
<div id="gauche">
<span id="recup_1"></span>
</div>
<div id="droite">
Utilisez ces boutons pour créer votre formulaire<br><br>
<button onclick= "afficher_click_label()" id= "id_bouton_label">Label</button><br><br>
<button onclick= "afficher_click_zone_texte()" id = "id_bouton_zone_texte">Zone de texte</button><br><br>
<button onclick= "afficher_click_bouton()"id="id_bouton" >Bouton</button><br><br>
</div>
<div id="en-dessous">
</div>
<script src= "jquery.js"></script>
<script src="fonctions_js_generateur_formulaire.js"></script>
<!--ajout d'une bibliothèque de gestion des espaces -->
<script src="jquery.empty-or-whitespace.js"></script>
</body>
</html> |
Voici le code de la fonction afficher_click_zone_texte() à laquelle je souhaiterais ajouter au tout debut du code pour annuler l'affichage précédent, résultat de l'appel
afficher_click_label()
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
function afficher_click_zone_texte(){
//création d'un nouvel element hr
var nouvelle_ligne = document.createElement("hr");
//on pointe vers la div à laquelle on souhaite ajouter la ligne+ ajout
document.getElementById("en-dessous").appendChild(nouvelle_ligne);
nouvelle_ligne.id = "right_2";
//creation de deux lignes et ajout de ces lignes à la div "en-dessous"
var balise_br_3 = document.createElement('br');
var balise_br_4 = document.createElement('br');
document.getElementById("en-dessous").appendChild(balise_br_3);
document.getElementById("en-dessous").appendChild(balise_br_4);
//creation du texte "Texte du label"
var texte= document.createTextNode("id_zone_de_texte"+"\u0020");
//ajout de ce texte à la balise en-dessous
document.getElementById("en-dessous").appendChild(texte);
//ajout d'un espace entre Texte "id_zone_de_texte" et la zone de saisie
var espace_blanc_3 = document.createTextNode("\u00a0" );
document.getElementById("en-dessous").appendChild(espace_blanc_3);
//creation d'une zone de saisie
var saisie_texte_2 = document.createElement("input");
saisie_texte_2.type ="text";
//affectation d'un id à la zone de saisie saisie_texte
saisie_texte_2.setAttribute("id", "id_saisie_texte_2");
//ajout à la div "en-dessous"
document.getElementById("en-dessous").appendChild(saisie_texte_2);
//creation d'un bouton
var bouton_ok_ZT = document.createElement("BUTTON");
//ajout d'un attribut id au bouton crée
bouton_ok_ZT.setAttribute("id","id_bouton_ok_ZT");
//creation du texte du bouton
var texte = document.createTextNode("OK");
//ajout du texte au bouton
bouton_ok_ZT.appendChild(texte);
//ajout d'un espace entre la zone de texte et le bouton OK
var espace_blanc_4 = document.createTextNode("\u00a0" );
document.getElementById("en-dessous").appendChild(espace_blanc_4);
//ajout du bouton à la div "en-dessous"
document.getElementById("en-dessous").appendChild(bouton_ok_ZT);
//declenchement de la fonction afficher_texte_div_gauche après un click sur le bouton bouton_ok_label
document.getElementById("id_bouton_ok_ZT").onclick = afficher_ZT_texte_div_gauche;
//ajout de deux sauts de ligne
//creation de deux lignes et ajout de ces lignes à la div "recup_texte_btn_ok"
var balise_br_5 = document.createElement('br');
var balise_br_6 = document.createElement('br');
document.getElementById("recup_1").appendChild(balise_br_5);
document.getElementById("recup_1").appendChild(balise_br_6);
//ajout d'une nouvelle span
var nouvel_element_span=document.createElement('span');
//affectation d'un id à la zone de saisie saisie_texte
nouvel_element_span.setAttribute("id", "recup_2");
var div_gauche=document.getElementById("gauche");
div_gauche.insertAfter(nouvel_element_span);
}//fin de fonction afficher_click_zone_texte |
Merci beaucoup de votre aide.
Bien cordialement.
new_wave
