Afficher un div avec innerHTML en javascript

**AlinoCFC** · 09/11/2017, 16h07

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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> &Ecirc;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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Michel** · 09/11/2017, 16h21

Bonjour,
Je n'ai pas testé le tout mais je suis tombé sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
'<div'+  
'style="background-color: white; margin-left :30%;  margin-right : 30px; width : 35%; overflow : auto; overflow-style :  scrollbar;" align = "center">'

qui risque donner quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<divstyle = ....etc.

ce qui n'est pas une balise div
En fait, il manque un espace après div ou avant style.

**AlinoCFC** · 10/11/2017, 10h08

je viens de rajouter un espace entre div et style, mais il n'y a toujours pas un rendu dans ma page

**Archimède** · 10/11/2017, 12h14

Je n'ai pas tout lu mais :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
    var dialog = document.getElementById(idDialog).value;
    var dialogContent = document.getElementById(idDialogContent).value;
    dialogContent.innerHTML = "";
    dialog.style.display = "block";

il me semble que tes paramètres identifiants pointent en utilisant ta fonction sur des div... donc si tu veux utiliser les propriétés de ces objets, le value n'a pas de sens...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
 var dialog = document.getElementById(idDialog);
 var dialogContent = document.getElementById(idDialogContent);
 dialogContent.innerHTML = "";
 dialog.style.display = "block";
 ......

Regarde les Cours JavaScript

**Watilin** · 10/11/2017, 15h36

innerHTML c’est sous-optimal et source d’erreurs. Utilise les méthodes du DOM :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var recap1 = document.createElement("div");
recap1.classList.add("recap1");
 
var title0 = document.createElement("div");
title0.classList.add("title0");
recap1.appendChild(title0);
 
var text = document.createTextNode("\xCAtes-vous certain(e) de " +
  "vouloir valider les informations ci-dessous\u202F?");
recap1.appendChild(text);
 
var table = document.createElement("table");
table.classList.add("table_");
recap1.appendChild(table);
 
var tr0 = table.insertRow();
tr0.insertCell().textContent = "Numéro";
tr0.insertCell().textContent = phone;
 
var tr1 = table.insertRow();
tr1.insertCell().textContent = "Montant";
tr1.insertCell().textContent = montant;
 
var inputOui = document.createElement("input");
inputOui.type = "submit";
inputOui.id = "validator";
inputOui.value = "Oui";
inputOui.classList.add("form-buttons");
recap1.appendChild(inputOui);
 
var inputNon = document.createElement("input");
inputNon.type = "submit";
inputNon.value = "Non";
inputNon.classList.add("form-buttons");
recap1.appendChild(inputNon);
 
inputNon.addEventListener("click", function (event) {
  event.preventDefault();
  fermerFenetre("conteneur");
});

Et ceci à rajouter dans le code CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.recap1 { background-color: white;
          margin-left: 30%;
          margin-right: 30px;
          width: 35%;
          overflow: auto;
          overflow-style: scrollbar;
          text-align: center;
        }
 
.recap1 tr { background: black;
             color: white;
           }
 
.recap1 td:first-child { font-variant: small-caps;
                       }
 
#validator { margin-top: 4px;
             margin-bottom: 0px;
           }
 
input[type="submit"][value="NON"] { margin-left: 10px;
                                    margin-top: 4px;
                                    margin-bottom: 0px;
                                  }

Pour des petits fragments de HTML tu peux utiliser insertAdjacentHTML, c’est déjà plus performant, mais ça ne règle pas le problème des risques d’erreurs dûs aux guillemets.

Docs :

Note : avec la nouvelle méthode append, tu peux te passer de createTextNode, mais ce n’est pas encore compatible partout.

Pour éviter les attributs onclick qui salissent le code HTML : addEventListener. Et je rajouterais que les liens javascript: sont généralement considérés comme une mauvaise pratique. Pour rendre tes liens plus accessibles, rajoute-leur des attributs aria ; ou mieux, remplace-les par des boutons, car le rôle initial d’un lien est de mener vers une autre page, pas de déclencher un comportement dans la page.

Edit : tu remarqueras que j’ai supprimé les pleines capitales. La seule situation où leur usage est justifié, c’est pour indiquer que quelqu’un est en train de crier. Autrement, c’est une faute de typographie. Les petites capitales peuvent être utilisées mais c’est un choix purement stylistique, et il doit être exprimé par du CSS uniquement. C’est pourquoi j’ai rajouté la règle font-variant: small-caps.

**NoSmoking** · 11/11/2017, 16h58

Bonjour,

...après le clic sur le bouton valider de la page recharge.jsp

cela doit surement être ma vue mais dans le code du fichier recharge.jsp que tu fournis je ne vois pas de bouton « Valider » !?!

**AlinoCFC** · 13/11/2017, 08h38

Bonjour NoSmoking. En fait j'ai juste placé un extrait de script de la page. C'est ainsi que le bouton Valider n'est pas sorti.

**AlinoCFC** · 13/11/2017, 08h44

Bonjour Watilin. Je suis entrain d'exploiter votre solution en utilisant les DOM. Mais je trouve la procédure si complexe. Toute fois je me suis déjà mis pour d'abord comprendre la logique de fonctionnement de DOM et ensuite commencer à coder. Merci pou votre coup de pouce.

**AlinoCFC** · 13/11/2017, 10h19

Solution trouvée. En fait c'était juste que je faisais mal l'appel de mon fichier recharge.js
Merci tout le monde pour votre participation à cette discussion.

Afficher un div avec innerHTML en javascript

JavaScript

Discussions similaires

Partager

Partager