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;
} |
