Récupération d'un id

Bonjour j'ai un souci de recuperation d'un id. Je ne pense pas que ce soit grand chose mais je ne trouve pas. J'ai un script qui me permet d'imprimer mon cv en ligne. J'ai donc un fichier impression.js ou j'ai mon script.

ET j'ai ma page ou le script est executé ou j'ai créé un bouton pour lancer le script.

Dans mon script j'ai donc un addeventlistener sur mon bouton et je veux recuperer l'id de mon btn. Mais voici le message que j'ai dans ma console:

Citation:

impression.js:30 Uncaught TypeError: Cannot read property 'addEventListener' of null

at imprimer (impression.js:30)

at impression.js:35

voici mon script:

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
function imprimer_bloc(titre, objet) {
// Définition de la zone à imprimer
var zone = document.getElementById(objet).innerHTML;
 
// Ouverture du popup
var fen = window.open("", "", "height=500, width=600,toolbar=0, menubar=0, scrollbars=1, resizable=1,status=0, location=0, left=10, top=10");
 
// style du popup
fen.document.body.style.color = '#000000';
fen.document.body.style.backgroundColor = '#FFFFFF';
fen.document.body.style.padding = "20px";
 
// Ajout des données a imprimer
fen.document.title = titre;
fen.document.body.innerHTML += " " + zone + " ";
 
// Impression du popup
fen.window.print();
 
//Fermeture du popup
fen.window.close();
return true;
 
 
 
}
function imprimer(){
 
document.getElementById("btn_imprime").addEventListener('click', function (e) {
    imprimer_bloc('titre', 'imprime_moi');
 });
}
 
imprimer();

et ma page:

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
79
80
81
82
83
84
85
86
87
<?php
     
    $this->title = 'serri stephan' ;
 include "menu.php" ;?>
<div id="top">
 <div id="imprime_moi">
    <div id="cv" class="instaFade">
 
        <div class="mainDetails">
          <?php while ($data0 = $result->fetch()){  ?> 
            <div id="headshot" class="img_profil quickFade"> <img src="public/images/<?=$data0['profil_img']?>"  alt="Serri Stephan" /> </div>
            <div id="name">
 
                <h1 class="quickFade delayTwo"><?=$data0['nom'].' '.$data0['prenom'] ?></h1>
                <h2 class="quickFade delayThree"><?=$data0['works']?></h2> </div>
            <div id="contactDetails" class="quickFade delayFour">
                <ul>
                    <li>email: <a href="mailto:serri-stephan@gmail.com" target="_blank"><?=$data0['mail']?></a></li>
                    <li>web: <a href="<?=$data0['web']?>"><?=$data0['web']?></a></li>
                    <li>mobile: <?=$data0['mobile']?></li>
                </ul>
                <?php } ?>
            </div>
            <div class="clear"></div>
        </div>
        <div id="mainArea" class="quickFade delayFive">
            <section>
                <article> 
                    <div class="sectionTitle">
                        <h1> Profil Personnel</h1> </div>
                    <div class="sectionContent">
                        <?php while ($data = $proCv->fetch()){ 
                echo $data['profil'];} ?>
                             </div>
                </article>
                <div class="clear"></div>
            </section>
            <section>
                <div class="sectionTitle">
                    <h1>Experience Professionelle</h1> </div>
                <div class="sectionContent">
                     <?php while ($data1 = $expCv->fetch()){ ?>
                    <article>
                        <h2><?=$data1['title'];?></h2>
                        <p class="subDetails"><?=$data1['period'];?></p>
                        <p><?=$data1['description'];?></p>
                    </article>
                   <?php }  ?>
                </div>
                <div class="clear"></div>
            </section>
            <section>
                <div class="sectionTitle">
                    <h1>Compétences</h1> </div>
                <div class="sectionContent">
                    <ul class="keySkills">
                        <?php while ($data2 = $avCv->fetch()){ ?>
                        <li><?=$data2['avantage'];?></li>
                        <?php } ?>
                    </ul>
                </div>
                <div class="clear"></div>
            </section>
            <section>
                <div class="sectionTitle">
                    <h1>Education</h1> </div>
                <div class="sectionContent">
                    <?php while ($data3 = $edCv->fetch()){ ?>
                    <article>
                        <h2><?=$data3['title_education'];?></h2>
                        <p class="subDetails"><?=$data3['title_secondary'];?></p>
                        <p><?=$data3['description_education'];?></p>
                    </article>
                    <?php } ?> 
                </div>
                <div class="clear"></div>
            </section>
        </div>
    </div>
 
 
<input type='btn' id='btn_imprime' class='btn btn-primary' value='Imprimer'/>
 
 
 
    </div>
</div>

Si je mets ma fonction imprimer directement dans ma page c'a fonctionne mais sinon non!!
Si vous pouviez m'aider merci beaucoup!!

Bonjour,
il y a de grande chance que ton script s'exécute avant que l'élément ne fasse partie du DOM.

Essaie en mettant cette instruction
Code:

1 2 3 document.getElementById("btn_imprime").addEventListener('click', function (e) { imprimer_bloc('titre', 'imprime_moi'); });
en fin de fichier.

C'est bon j'ai trouvé:
j'ai remplacé imprimer();
par
window.onload=imprimer;

ou plus proprement

Code:

1
2
3
4
5
window.addEventListener("load", function() {
  document.getElementById("btn_imprime").addEventListener('click', function(e) {
    imprimer_bloc('titre', 'imprime_moi');
  });
});

Super merci ç'a marche.:D