Afficher un div avec innerHTML en javascript
Bonjour tout le monde. Voil� quelques heures je gal�re avec ces lignes des codes. En effet, je voudrais afficher le contenu de la variable recap1 apr�s le clic sur le bouton valider de la page recharge.jsp. Je ne comprends pas pour quelles raisons, rien ne s'affiche. Est-ce que quelqu'un y trouve des probl�mes?
le fichier recharge.jsp
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<link href="css/recapitulation.css" rel="stylesheet" type="text/css" media="all" />
<title>Recharge</title>
</head>
<body>
<div id="conteneur" class="fullScreen1 opacOut" style="display: none; z-index: 12;">
<div id="dim_div" class="overlay" style="margin-right: 10px;"></div>
<div class="corner_right" >
<a id='closeATag' href="javascript:;" onclick="fermerFenetre('conteneur');">
<img id='closeImg' alt="fermer" src="images/close.png"></a>
</div>
<div class="dialogContent_block">
<div id='conteneurChild'></div>
</div>
</div>
</body>
</html> |
le fichier recapitulatif.js
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
| var toCall;
function recapituler(){
var phone = document.getElementById('phone').value;
var montant=document.getElementById('montant').value;
var recap1 = '<div'+
'style="background-color: white; margin-left :30%; margin-right : 30px; width : 35%; overflow : auto; overflow-style : scrollbar;" align = "center">'+
'<div class="title0"></div> Êtes-vous certains de vouloir valider les informations ci-dessous : <br><br><br>'+
'<table class="table_\">'+
'<tr style="background : black; color : white;\">'+
'<td>NUMERO</td><td>'+phone+'</td></tr>'+
'<tr style="background : black; color : white;\">'+
'<td>MONTANT</td><td>'+montant+'</td></tr>'
'</table>'+
'<input type="submit" id="validator\" value="OUI" class="form-buttons" style="margin-top: 4px;margin-bottom: 0px;"'+
'onclick=""/>'+
'<input type="submit" value="NON" class="form-buttons" style="margin-left :10px; margin-top: 4px;margin-bottom: 0px;"'+
'"onclick="fermerFenetre("conteneur")/>"'+
'</div><br><br><br><br><br><br><br><br><br><br><br>';
showDialog('conteneur', 'conteneurChild', recap1);
document.getElementById('validator').onclick = function(){
toCall = function(){
recharger();
};
};
}
function showDialog(idDialog, idDialogContent, msg){
var dialog = document.getElementById(idDialog).value;
var dialogContent = document.getElementById(idDialogContent).value;
dialogContent.innerHTML = "";
dialog.style.display = "block";
dialogContent.innerHTML = msg;
//dialogContent.style.display = "block";
/*------ loading image block -----------*/
var imgDiv = createLoadingImageBlock();
dialogContent.appendChild(imgDiv);
/*--------------------------------------*/
}
function fermerConteneur(idDialog){
var dialog = document.getElementById(idDialog);
dialog.style.display = "none";
} |
le fichier recapitulation.css
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
| .fullScreen1{
position:fixed;width:100%;top:0;left:0;
height:auto;
}
#dialogContent{
display: inline-block;
height: auto;
width: 92%;
margin-left: 3.8%;
margin-bottom: 50px;
}
.dialogContent_block{
position: fixed;
height: auto;
width: 100%;
margin-top: 50px;
overflow-y: auto;
max-height: 100%;
padding-top: 1px;
z-index: 3;
background: rgba(000,000,000,0.3);
}
.opacOut{
animation-name: opacityOut;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
}
.corner_right #closeImg{
height: 39px;
width: 39px;
}
.corner_right #closeATag{
display: inline-block;
height: 40px;
width: 40px;
border-radius: 50px;
background: linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
background: -webkit-linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
background: -moz-linear-gradient(#aebcbf,#6e7774, #0a0e0a,#0a0809);
text-align: center;
} |
