type error : elem is null

**aertys** · 16/03/2020, 19h31

bonjour à tous,

j'ai pas mal avancé sur mon site qui est maintenant sur internet (MMT Dalal Freres).

j'essaye de mettre ce site à jour et c'est là que je ne comprends pas.
j'ai essayé à partir d'une variable (matConsButton) et d'une function (afficheFormMatCons) d'afficher/masquer un formulaire. Mais le bouton n'affiche rien lors d'un clic dessus.

ci-dessous le code js et html

pouvez-vous m'aider ?

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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
var site = function () {
 
     function changeColor (element,couleur) {
     console.log('chorale');
 
         var theAs = document.querySelectorAll('nav div');
         console.log(theAs.length);
         for (var i = 0 ; i < theAs.length; i++) {
          console.log('cuicui');
               theAs[i].style.color = 'black';
               if (i === element) {
               console.log('soleil');
                    theAs [i].style.color = couleur;   
               }
          }
 
     }
 
   function load_fr () {
 
       window.location.href = 'sitetaherfr.html';
       who_are_we ('fr');
 
    }
 
   function load_en () {
 
       window.location.href = 'sitetaheren.html';
       who_are_we ();
 
    }
 
 
    function listApp (list, tab) {
 
        for (var i = 0 ; i < tab.length ; i++) {
            list.appendChild (tab [i])
        }
 
    }
 
    function addChar (c,truc) {
 
        var propText = document.createTextNode (c);
        truc.appendChild (propText);   
 
    }
 
/*    function changeLang (e) {
   
//        switch (e.target.value) {
//            case 'fr':
//            load_fr ();
            break;
            case 'en':           
            load_en ();
            break;
//        }
   
//    }
*/
     function addEvent (ev, func, elem) {
 
        if (elem.addEventListener) {
            elem.addEventListener (ev, func, false);
        }
 
        else if (elem.attachEvent) {              // For IE 8 and earlier versions
            elem.attachEvent('on' + ev, func);
        }
 
    }
 
    var body =  document.querySelector ('body'),
        header1 = document.querySelector ('header'),
        h1 = document.querySelector ('h1'),
        sel1 = document.querySelector ('select'),
        lang = sel1.value,
        ent = document.querySelector ('.ent'),
        pro = document.querySelector ('.pro'),
        cli = document.querySelector ('.cli'),
        mar = document.querySelector ('.mar'),
        tem = document.querySelector ('.tem'),
        con = document.querySelector ('.con'),
//      aside1_1 = document.querySelector ('section aside'),
        article1_1 = document.querySelector ('section article');
 
    var MatConsButton = document.querySelector('.matCons');
    addEvent('click',afficheFormMatCons, MatConsButton);
    var FormMatCons = document.querySelector('.FormMatCons');
 
    var ul1 = document.createElement('ul');
    var li1_1 = document.createElement ('li');
    var li1_2 = document.createElement ('li');
    var li1_3 = document.createElement ('li');
    var a1_3_1 = document.createElement ('a');
         a1_3_1.href = 'mailto:mamodaly.dalal@wanadoo.fr';
         li1_3.appendChild (a1_3_1);
    var children = [li1_1, li1_2, li1_3];
         listApp (ul1, children);
 //   var article1_2 = document.createElement('article');
    // var li1_4 = document.createElement ('li');
 
    function inFrench () {
         console.log("fr");
         /*
        addChar ('qui sommes-nous ?', li1_1);
        addChar ('nos produits', li1_2);
        addChar ('contactez-nous', a1_3_1);
        labSel.innerHTML = 'Choisissez votre langue :';
    f0orm1.appendChild (labSel);m
    form1.appendChild (sel1);
    header1.appendChild (form1);
   
    body.appendChild (header1); */
    }
 
    function inEnglish () {
        addChar ('about us', li1_1);
        addChar ('our products', li1_2);
        addChar ('contact us', a1_3_1);
        labSel.innerHTML = 'Choose your language :';
    form1.appendChild (labSel);
    form1.appendChild (sel1);
    header1.appendChild (form1);
 
    body.appendChild (header1);
    }
 
    function who_are_we () {
 
        changeColor (0,'red');
//        aside1_1.id = '';
         console.log(lang);
 
        switch (lang) {
            case 'fr':
              article1_1.innerHTML = "<p><span class='maj'>n</span>ous sommes la <span class='maj'>s</span>oci&eacute;t&eacute; <span class='maj'><span class='bold'>r&egrave;res </span><br><span class='maj'>c</span>ertes, nous sommes une petite &eacute;quipe mais pour nous <span class='maj'>s</span>eule <span class='maj'><span class='bold'>prime votre satisfaction. </span></span><span class='maj'>p</span>etits ou <span class='maj'>g</span>ros, <span class='bold'>vous avez tous la m&ecirc;me importance.</span> <span class='maj'>t</span>oujours &agrave; votre &eacute;coute, nous sommes tr&egrave;s r&eacute;actifs &agrave; toutes vos demandes avec une pr&eacute;cision in&eacute;galable.<br><span class='bold'><span class='maj'>n</span>otre devise</span>: <span class='maj'>c</span>e que nous ne vous proposons pas aujourd&acute;hui le sera demain car d&eacute;j&agrave; &agrave; l&acute;&eacute;tude .</p> ";
//              aside1_1.innerHTML += '';
            break;
            case 'en':
              article1_1.innerHTML = "<p><span class='maj'>w</span>e are the <span class='maj'>c</span>ompany <span class='maj'><span class='bold'>f</span></span><span class='bold'>r&egrave;res, </span><p><span class='maj'>w</span>e are a small but fully committed team. <br><span class='bold'><span class='maj'>o</span>ur goal is your satisfaction.<br><br></span> <span class='maj'>a</span>ll our customers are important and we give the same attention <br>to all of them, no matter the size as we try to meet all the requirements <br>with the maximum of efficiency and diligence.<br></p><p><span class='bold'><span class='maj'>o</span>ur aim is to anticipate your needs </span><br>and offer you what you might require <br>tomorrow in a fast moving trading world. </p> ";
//            aside1_1.innerHTML += '';
            break;
        }
 
    }
 
 
 
   function afficheFormMatCons () {
   if (FormMatCons.display === 'none') {
   FormMatCons.display = 'block';}
   else {
        FormMatCons.display = 'none';
          }
   }
 
 
 
    function products () {
 
        changeColor (1,'red');        
//        aside1_1.id = 'up';
 
        switch (lang) {
            case 'fr':
              article1_1.innerHTML = "<div><br><span class='maj bold italic goldenrod'>si vous ne trouvez pas votre produit ci-dessous, n'h&eacute;sitez pas</span><span class='maj bold italic'> <a href='pageproduits.html' target='_blank' class='pProd' title='Que Recherchez-Vous ? '><Button>interrogez-nous.</Button></a> </span><br><br><span class='maj bold italic goldenrod'>Nous le chercherons sp&eacute;cialement pour vous. </span><br><br><Button class='matCons'><li class='maj bold'>materiaux de construction <br></li></Button><form method='post' action='matCons.php' class='FormMatCons'><div><span class ='maj'>p</span>our traiter votre demande, quelques pr&eacute;cisions</div></form><ul class='second'><li><i class='right'></i><span class ='maj'>f</span>ers &agrave; b&eacute;ton</li><br><i class='right'></i><li><span class ='maj'>t</span>oles ondul&eacute;es, toles planes</li><br><i class='right'></i><li><span class ='maj'>p</span>rofil&eacute;s</li><br><i class='right'></i><li><span class ='maj'>t</span>reillis soud&eacute;s</li><br><i class='right'></i><li><span class ='maj'>g</span>rillages</li><br><i class='right'></i><li><span class ='maj'>c</span>ontreplaqu&eacute;s, isorel</li><br><i class='right'></i><li><span class ='maj'>l</span>ambris PVC</li><br><i class='right'></i><li><span class ='maj'>m</span>oulures</li><br><i class='right'></i><li><span class ='maj'>v</span>itrages</li><br><br></ul> <li class='maj bold'>quincaillerie</li><ul class='second'><li><i class='right'></i><span class ='maj'>m</span>astic</li><br><i class='right'></i><li><span class ='maj'>q</span>uincaillerie d'ameublement</li><br><br></ul> <li class='maj bold'>films agricoles</li><br><ul> </ul> <li class='maj bold'>outillages agricoles</li><br><ul></ul> <li class='maj bold'>matieres premieres pour savonnerie</li><br><ul></ul><li class='maj bold'>sacs en jute</li><br><ul></ul><li class='maj bold'>engrais</li><br><ul></ul><li class='maj bold'>produits phytosanitaires</li><br><ul></ul><li class='maj bold'>provende</li><br><ul></ul><li class='maj bold'>films de vitrage</li><br><ul></ul> <li class='maj bold'>farine, sucre, huile</li><br><ul></ul> <li class='maj bold'>pieces detachees en depannage</li><br><ul></ul> <li class='maj bold'>tissus techniques</li><br><ul></ul> <ul></ul> </div>";
//              aside1_1.innerHTML += '';
             /** addEvent('click',afficheFormMatCons, MatConsButton); **/
               break ;
            case 'en':
             article1_1.innerHTML = "<ul><span class='maj bold italic goldenrod'>if you do not find your product, do not hesitate, contact us.</span><br><br><span class='maj bold italic goldenrod'>We will find it specially for you. We deal in the following items : </span> </li><br><br><li class='maj bold'>building material</li><ul class='second'><li><i class='right'></i><span class ='maj'>s</span>teel bars</li><br><i class='right'></i><li><span class ='maj'>c</span>orrugated sheets</li><br><i class='right'></i><li><span class ='maj'>a</span>luminium profile</li><br><i class='right'></i><li><span class ='maj'>w</span>elded wire melsh</li><br><i class='right'></i><li><span class ='maj'>c</span>oated mesh, fence panels</li><br><i class='right'></i><li><span class ='maj'>p</span>lywood</li><br><i class='right'></i><li><span class ='maj'>PVC</span> panel</li><br><i class='right'></i><li><span class ='maj'>m</span>oulures</li><br><i class='right'></i><li><span class ='maj'>g</span>lass, glazing</li><br><br></ul> <li class='maj bold'>hardware</li><ul class='second'><li><i class='right'></i><span class ='maj'>p</span>utty, sealant, silicone sealant</li><br><i class='right'></i><li><span class ='maj'>h</span>ardware and accessories furniture making</li><br><li><span class ='maj'>b</span>olds and nuts, general hardware</li><br><br></ul> <li class='maj bold'>agricultural films</li><br><ul> </ul> <li class='maj bold'>tools and machineray for agriculture</li><br><ul></ul> <li class='maj bold'>raw materials for soap industry</li><br><ul></ul><li class='maj bold'>jute bags</li><br><ul></ul><li class='maj bold'>fertiliser</li><br><ul></ul><li class='maj bold'>phytosanitary  products, supply</li><br><ul></ul><li class='maj bold'>chicken feed</li><br><ul></ul><li class='maj bold'>films de vitrage</li><br><ul></ul> <li class='maj bold'>flour, sugar, oil</li><br><ul></ul> <li class='maj bold'>emergency spare parts</li><br><ul></ul> <li class='maj bold'>specialised materials</li><br><ul></ul> <ul></ul> </ul>";
 
               break;             
        }
        }
 //              aside1_1.innerHTML += '';   
    function customers () {
 
        changeColor (2,'red');
//         aside1_1.id = '';
 
        switch (lang) {
            case 'fr':
              article1_1.innerHTML = "<ul><li class='maj'>agriculteurs et secteur agricole</li><ul> </ul> <li class='maj'>quincaillers</li><ul></ul> <li class='maj'>menuiserie aluminium et pvc</li><ul></ul><li class='maj'>boulanger et secteur de la boulangerie</li><ul></ul><li class='maj'>bazar multi produits</li><ul></ul><li class='maj'>btp et constructions</li><ul></ul><li class='maj'>ditributeurs et revendeurs</li><ul> </ul><li class='maj'>secteur industriel</li></ul>";
//              aside1_1.innerHTML += '';
            break;
            case 'en':
              break;            article1_1.innerHTML = "<ul><li class='maj'>farmers and farming sector</li><ul> </ul> <li class='maj'>hardware shops</li><ul></ul> <li class='maj'>carpenter shop aluminium and pvc</li><ul></ul><li class='maj'>bakers and bakery sector</li><ul></ul><li class='maj'>general hardware</li><ul></ul><li class='maj'>building and construction material</li><ul></ul><li class='maj'>distributors and resellers</li><ul> </ul><li class='maj'>industrial sector</li></ul>";
//              aside1_1.innerHTML += '';
            break;
        }
    }
    function market () {
 
        changeColor (3,'red');
 
         console.log("mark");
        switch (lang) {
            case 'fr':
              article1_1.innerHTML = "<p class='bold'><span class='maj'>n</span>otre couverture g&eacute;ographique actuelle s'&eacute;tend sur plusieurs continents </p>;
//              aside1_1.innerHTML += '';
            break;
            case 'en':
              article1_1.innerHTML = "<p class='bold'><span class='maj'>c</span>ountries we are working with covers several continents </p>;
//              aside1_1.innerHTML += '';
            break;
 
        var mymap = L.map('mapid').setView([48.864716, 2.349014], 0);
    }
}   
    function testimonies () {
 
        changeColor (4,'red');
 
         console.log("tesm");
         switch (lang) {
            case 'fr':
               article1_1.innerHTML = "<div><span class='maj'>p</span>ous nous laisser un t&eacute;moignage, ;          
 //             aside1_1.innerHTML += '';
            break;
            case 'en':
             article1_1.innerHTML = "<div><span class='maj'>t</span>o add a testimony, <a href='mailto:contact.mmt.testimonies@gmail.com'> click here</a>, ;
//              aside1_1.innerHTML += '';
            break;
        }
        article1_1.style.display =  'block';
 
    }
 
   function  switchLang () {
          switch (sel1.value) {
               case 'fr' :
               load_fr () ;
               break;
               case 'en' :
               load_en () ;
               break;
          }
 
   }   
 
    /*
    function who_are_we () {
        if (opt1.selected) {
            article1_1.innerHTML = '';
        }
        else {
            article1_1.innerHTML = '';
        }
        section1.appendChild (article1_1);
        body.appendChild (section1);
    }
    */
    addEvent ('click', who_are_we, ent);
    addEvent ('click', products,  pro);
    addEvent ('click', customers,  cli);
    addEvent ('click', market,  mar);
    addEvent ('click', testimonies, tem);
    addEvent ('change', switchLang, sel1);
 
    li1_1.onclick = who_are_we ();
    li1_2.onclick = products ();
    li1_3.onclick = customers ();
 
//    aside1_1.appendChild (ul1);
//    section1.appendChild (aside1_1);
 
    inFrench ();
    who_are_we ();
};
// var siteG = new site ();   
site ();

Code html :

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

1
2
3
4
5
6
 
<div class="pro"><span class="maj">n</span>os <span class="maj">p</span>roduits</div>
   	<section>
  <article></article>
        </section>
  <script type="text/javascript" src="js/20180107sitev0.js"></script>

**nadfri2019** · 14/05/2020, 19h37

Salut,

Il manque "style" à ton code ici:

Code :

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

1
2
3
4
5
6
7
 
   function afficheFormMatCons () {
   if (FormMatCons.display === 'none') {
   FormMatCons.display = 'block';}
   else {
        FormMatCons.display = 'none';
          }

Code :

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

1
2
3
4
5
6
   function afficheFormMatCons () {
   if (FormMatCons.style.display === 'none') {
   FormMatCons.style.display = 'block';}
   else {
        FormMatCons.style.display = 'none';
          }

**javatwister** · 15/05/2020, 08h54

Bonjour;

Si tu n'as pas déclaré inline le style de ton formulaire, ça ne marchera pas;

Solution B:
Tu ajoutes ceci dans ta css...

Code css :

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

.ghost {display:none}

et ta fonction devient...

Code javascript :

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

1
2
3
function afficheFormMatCons () {
  FormMatCons.classList.toggle("ghost");
}

type error : elem is null

JavaScript

Discussions similaires

Partager

Partager