ID ophalen van een geklikt event

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Graneker

Jan Graneker

08/07/2018 14:13:46
Quote Anchor link
Goedemiddag Allemaal,

Ik ben bezig met een school opdracht en kom er momenteel even niet uit. Zouden jullie mij verder op weg willen helpen?

Ik heb een imagemap waarbij verschillende area's klikbaar zijn.
Wanneer je op en area klik wil ik dat (this) ID ophalen en vervolgens in mijn script verwerken.

Wanneer ik het script uitvoer krijg ik de volgende melding:
Quote:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at window.onload (index.html:89)


var geklikt = document.getElementById(this.id); // Van het geklikte object pak daar de ID van en stop deze in de var var geklikt.

geklikt.addEventListener('click', function(e){


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<script>            
        
            window.onload = function(){

                
            for(var i = 0; i < motorOnderdelen.length; i++){
                
                var geklikt = document.getElementById(this.id);
                geklikt.addEventListener('click', function(e){

                    function getDatabase(){
                        e.preventDefault();                                     // delete originial default link propertie
                          
                            var main = document.getElementById("main");         // get main tag
                            var article = document.createElement("article");    // create   articletag
                            
                            var div = document.createElement("div");            // create a div tag
                            div.setAttribute("class", "productContent");        // set class and name
                        
                            var close = document.createElement("span");         // back span (button)
                            close.setAttribute("class", "close");        
                            close.onclick = function(){                         // onclick call a function
                                closeBlock();
                            }  
                        
                            var back = document.createElement("span");         // back span (button)
                            back.setAttribute("class", "back");  
                            back.textContent = "Terug naar home";
                        
                            var divImg = document.createElement("div");            // create a div tag
                            divImg.setAttribute("class", "productImg");        // set class and name
                            
                            var titel = document.createElement("h1");          // create h1
                            titel.setAttribute("id", "productTitle");           // set id en name
                            titel.innerHTML = motorOnderdelen[i].titel;                // set titel in h1
                        
                            var content = document.createElement("p");          // create p
                            content.setAttribute("id", "productContent");       // set id and name
                            content.innerHTML = mmotorOnderdelen[i].omschrijving;       // set content in p
                        
                            var contentMerk = document.createElement("p");          // create p
                            contentMerk.setAttribute("id", "productEigenschappen");       // set id and name
                            contentMerk.innerHTML = motorOnderdelen[i].eigenschappen;       // set content in p
                        
                            var createImage = new Image();                          // create img tag
                            createImage.src = imagesMap + motorOnderdelen[i].afbeelding;      
                            createImage.setAttribute("class", "productImg");        // set class and name

                            divImg.appendChild(createImage);
                            div.appendChild(close);                                  // insert close button to div
                            div.appendChild(titel);                                  // insert title to div              
                            div.appendChild(content);                                // insert p to div
                            div.appendChild(contentMerk);                            // insert p to div
                            div.appendChild(back);
                                                                                     // set div in article
                            article.appendChild(divImg);
                            article.appendChild(div);                                // set div in article
                        
                            document.getElementById(article);                       // set article in document body
                            document.body.appendChild(article);
                            
                    }
                    
                getDatabase();
                    
                 }, false);
            }
            }
            
                                          
            function closeBlock(){  
                var close = document.getElementsByTagName('article')[0];  
                
                if(close.style.display === "block"){
                   close.style.display = "none";
                    }
                
                else {
                    close.style.display = "block";
                }
    
            }
          
    </script>


Waar ga ik de mist in?
 
PHP hulp

PHP hulp

17/10/2018 12:55:39
 
Thomas van den Heuvel

Thomas van den Heuvel

08/07/2018 16:39:53
Quote Anchor link
Regel 8?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var geklikt = document.getElementById(this.id);

Waar komt this / this.id vandaan?

Vervolgens kan het element "geklikt" niet worden gevonden, en kun je daar dan dus ook geen event listener aan hangen. Dat zegt de foutmelding ook min of meer: "of null".
Gewijzigd op 08/07/2018 17:11:19 door Thomas van den Heuvel
 
Rob Doemaarwat

Rob Doemaarwat

08/07/2018 17:52:54
Quote Anchor link
Het kan zijn dat "onload" dit element nog niet bestaat (maar bijvoorbeeld pas net iets later wordt aangemaakt middels een stukje javascript).
 
Thomas van den Heuvel

Thomas van den Heuvel

08/07/2018 18:53:18
Quote Anchor link
Maar je zit toch ook niet in een soort van context of callback functie, dus er is geen "this"?
 
Rob Doemaarwat

Rob Doemaarwat

08/07/2018 19:20:12
Quote Anchor link
Binnen de "onload" verwijst "this" naar het Window object. Geen idee of het zo bedoeld is (het is niet echt nodig), of dat het gewoon een kwestie is van "wat knipwerk in de code om de vraag niet al te complex te maken", waardoor de context (pun intended) een beetje verloren is gegaan.
 
Jan Graneker

Jan Graneker

08/07/2018 20:12:14
Quote Anchor link
Thomas van den Heuvel op 08/07/2018 16:39:53:
Regel 8?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var geklikt = document.getElementById(this.id);

Waar komt this / this.id vandaan?

Vervolgens kan het element "geklikt" niet worden gevonden, en kun je daar dan dus ook geen event listener aan hangen. Dat zegt de foutmelding ook min of meer: "of null".


this zou de onclick moeten representeren.


Toevoeging op 08/07/2018 20:23:18:

Ik denk dat ik wat meer inzage in mijn code moet geven, zodat ik beter kan uitleggen wat ik wil gaan maken en de context van het script.

Externe js code (soort van databaseje)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var motorOnderdelen = ['myBrakedisk', 'myOil', 'mySprocket', 'myFrontBrake', 'mySaddle', 'myTurningLightBack', 'myWeights', 'myLight'];        // array aanmaken


function Productinformatie (producttitel, productomschrijving, producteigenschappen, productimg){              
     // maak prototype deze is dus herbruikbaar.
    this.titel = producttitel;
    this.omschrijving = productomschrijving;
    this.eigenschappen = producteigenschappen;
    this.afbeelding = productimg;
};  

var myBrakedisk = new Productinformatie (
    "Remschijven",
    "Remschijven zijn metalen schijven die voor of achter aan de motorfiets bevestigd zijn. Deze werken samen met de remblokken om de motorfiets te vertragen en uiteindelijk te stoppen. In de loop der jaren zijn remschijven steeds verder doorontwikkeld en steeds beter geworden. Je hebt remschijven gemaakt van verschillende materialen. Het meest wordt echter staal gebruikt. Daarnaast heb je zwevende remschijven en vaste schijven.",
    "Aluminium, koper en steel",
    "producten/remschijven.jpg"
);



Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<map name="Map" id="map">
                    <area shape="poly" id="brakedisk" coords="301,650,291,654,279,658,271,664,260,672,249,680,240,690,233,698,223,710,215,726,210,736,205,752,201,766,198,781,198,794,198,810,201,824,204,838,207,851,213,866,221,878,228,889,239,903,253,915,267,922,280,929,295,933,309,936,331,936,357,930,373,923,383,916,394,910,406,899,419,882,431,863,441,842,446,824,435,826,426,829,415,832,403,850,396,850,391,850,385,850,381,855,382,863,383,866,384,871,382,876,376,880,371,887,361,890,355,893,352,891,349,887,342,882,337,883,335,886,334,890,334,894,331,898,329,900,317,902,305,901,298,899,296,892,296,884,294,878,289,877,285,877,281,880,277,884,273,886,262,880,251,866,250,857,254,850,257,846,257,840,253,838,250,835,245,836,241,836,237,836,230,816,229,802,233,794,245,790,245,786,246,780,243,774,238,772,235,767,235,758,241,742,249,730,255,732,261,732,265,734,270,729,271,724,268,715,267,709,269,702,281,694,288,691,295,687,299,686,301,692,304,696,307,700,313,700,317,698,318,692,316,688,320,683,326,677,314,672" href="#" alt="remschijf">
                    <area shape="poly" id="oil" coords="842,630,910,670,911,688,910,697,910,701,905,708,902,714,898,720,893,726,887,733,880,736,873,739,863,742,858,743,850,742,845,742,841,741,836,739,832,738,828,733,824,730,821,725,818,720,814,712,812,704,812,697,812,689,813,678,814,672,816,665,823,653,828,646,836,636" href="#">
                    <area shape="poly" id="sprocket" coords="1290,714,1289,716,1285,718,1285,720,1289,722,1290,725,1290,728,1290,729,1288,731,1287,733,1290,735,1291,735,1292,739,1292,741,1291,742,1290,746,1291,747,1294,748,1296,749,1295,752,1294,754,1294,757,1295,759,1299,760,1300,760,1302,760,1303,762,1301,765,1301,767,1300,768,1298,770,1305,771,1306,770,1307,772,1307,774,1306,776,1306,779,1308,780,1310,778,1311,777,1313,778,1315,780,1315,781,1315,785,1315,788,1320,789,1321,787,1324,789,1326,791,1326,792,1332,792,1334,794,1344,796,1352,796,1358,797,1365,797,1378,794,1385,792,1393,786,1404,777,1412,769,1419,759,1423,751,1426,744,1429,735,1431,729,1433,718,1435,714,1435,708,1435,706,1435,700,1435,691,1433,683,1431,673,1427,663,1425,658,1421,648,1416,640,1411,634,1406,630,1401,627,1392,622,1388,620,1379,618,1374,617,1371,618,1365,624,1362,628,1426,695,1417,695,1400,691,1390,691,1383,689,1378,689,1374,692,1373,697,1372,701,1371,706,1369,711,1368,716,1366,721,1364,723,1361,727,1358,729,1356,730,1352,730,1345,728,1336,725,1329,723,1318,720,1314,718,1307,716,1297,713,1294,712" href="#">
                    <area shape="poly" id="frontBrake" coords="574,224,571,225,570,228,573,233,579,240,586,246,589,248,595,248,599,248,604,250,610,255,617,262,622,268,624,270,627,275,632,281,636,290,637,295,641,297,643,302,641,306,641,308,640,311,636,312,629,311,627,310,626,307,627,299,631,296,624,291,621,286,617,279,613,272,609,271,605,269,602,265,597,264,593,262,583,259,578,256,569,249,561,243,554,239,548,236,545,232,541,227,542,222,549,221,552,220,562,221,567,222" href="#" alt="brake">
                    <area shape="poly" id="saddle" coords="989,281,988,288,987,290,988,295,990,301,993,306,997,313,1003,318,1007,320,1013,323,1020,325,1071,338,1076,338,1081,338,1085,338,1200,288,1222,280,1231,277,1236,275,1240,273,1246,270,1250,267,1254,265,1260,259,1266,252,1268,249,1268,247,1270,242,1271,238,1273,233,1273,230,1273,227,1273,224,1270,221,1266,216,1263,214,1259,211,1254,208,1251,207,1248,206,1241,205,1236,206,1195,220,1185,221,1180,221,1177,220,1172,216,1169,214,1166,210,1161,209,1155,206,1152,205,1147,205,1105,224,1081,236,1063,245,1048,254,1035,263,1026,266,1014,268,993,269" href="#">
                    <area shape="poly" id="turningLightBack" coords="1524,296,1532,295,1535,294,1537,293,1542,293,1545,293,1550,293,1557,293,1560,294,1564,295,1567,296,1571,301,1572,302,1575,305,1576,307,1576,309,1575,312,1572,314,1568,317,1564,319,1559,322,1557,322,1555,323,1550,324,1547,324,1544,324,1538,322,1535,322,1525,320,1521,318,1519,317,1515,315,1513,312,1513,308,1513,304,1515,302,1519,299,1520,298" href="#">
                <area shape="poly" coords="712,261" href="#">
                    <area shape="poly" id="weights" coords="721,280,719,287,718,291,718,294,718,297,719,299,724,301,726,302,728,303,731,303,735,302,738,300,739,299,743,295,744,292,745,287,745,285,744,281,741,279,739,276,737,274,735,273,732,273,728,273,724,275,721,278,719,283" href="#">
                <area shape="poly" id="tank" coords="781,146,783,151,785,154,787,157,790,164,790,170,793,191,794,200,795,204,796,209,798,215,800,220,805,224,810,227,818,231,827,236,851,251,860,257,864,263,867,269,869,275,872,279,917,293,938,299,951,304,959,306,963,307,965,307,981,294,988,282,989,274,989,267,980,245,973,230,969,218,966,212,964,208,962,205,959,201,954,196,950,194,939,184,923,173,907,164,891,156,870,146,853,139,841,136,836,135,830,134,822,134,808,134,800,134,791,135,781,135,775,136,765,136,756,137,747,138,740,138,735,139,728,140,723,143,716,145,712,146,709,147,705,149,702,152,700,154,697,157,696,160,695,163,694,164,694,165" href="#">
                <area shape="poly" coords="596,547,606,548,613,548,617,551,619,552" href="#">
                <area shape="poly" id="turningLight"  coords="630,578,635,575,639,571,643,568,643,565,642,562,636,559,630,555,625,554,622,552,616,548,611,548,604,549,599,549,596,549,591,551,588,552,583,554,581,557,580,560,579,563,580,571,582,573,587,576,589,577,595,579,602,581,609,581,620,581,624,579" href="#">
                <area shape="poly" id="light" coords="433,251,427,260,423,268,416,273,407,282,402,288,397,299,393,306,386,317,379,331,377,336,366,345,359,347,272,375,229,390,223,391,220,385,220,379,236,346,241,338,244,334,249,331,284,304,306,291,317,283,322,279,330,275,341,269,360,263,386,255,404,249,416,246,428,245,434,245" href="#">
          </map>
          </div>
        </div>
        
      <!-- <article>
            <div class="productImg">
                <img src="images/producten/oliefilter.jpg" alt=""/>
            </div>

            <div class="productContent">
                <span class="close"></span>
                <h1 id="productTitle">Olie</h1>
                <p id="productContent">
                Een oliefilter is er n van een paar filters die in de motorfiets zitten. Het filter zorgt er voor dat de olie in het motorblok schoon blijft. Ook zorgt het oliefilter er voor dat er geen vuildeeltjes in het blok komen die het blok ernstig kunnen beschadigen. Een oliefilter is dus een van de belangrijkste filters in het motorblok
                </p>
                <p id="productEigenschappen">Merknaam</p>
                <span class="back">Terug naar de motor</span>
              
            </div>
        </article> -->
        
    </main>
    
    <footer></footer>
</div>  

    
    
<script>
    // preload
    
   var imagesMap = "images/";                     // source map
   var imagesList = ["yamaha-r6-wit-rood.png"];  // array with images
  
    
   function preloadImages(){
       for(var i=0; i<imagesList.length; i++){ // Ga door de imagesList array heen. En voor elk item in de array...
          var createImage = new Image();
           createImage.src = imagesMap + imagesList[i]; // Geef de nieuwe image een src-attribute. De browser gaat nu direct de image opvragen bij de server!
                }
            
   }
</script>  
      
    
<script src="js/information.js"></script>
        <script>            
        
            window.onload = function(){

                
            for(var i = 0; i < motorOnderdelen.length; i++){
                
                var geklikt = document.getElementById(this.id);
                brakedisk.addEventListener('click', function(e){

                    function getDatabase(){
                        e.preventDefault();                                     // delete originial default link propertie
                          
                            var main = document.getElementById("main");         // get main tag
                            var article = document.createElement("article");    // create   articletag
                            
                            var div = document.createElement("div");            // create a div tag
                            div.setAttribute("class", "productContent");        // set class and name
                        
                            var close = document.createElement("span");         // back span (button)
                            close.setAttribute("class", "close");        
                            close.onclick = function(){                         // onclick call a function
                                closeBlock();
                            }  
                        
                            var back = document.createElement("span");         // back span (button)
                            back.setAttribute("class", "back");  
                            back.textContent = "Terug naar home";
                        
                            var divImg = document.createElement("div");            // create a div tag
                            divImg.setAttribute("class", "productImg");        // set class and name
                            
                            var titel = document.createElement("h1");          // create h1
                            titel.setAttribute("id", "productTitle");           // set id en name
                            titel.innerHTML = motorOnderdelen[i].titel;                // set titel in h1
                        
                            var content = document.createElement("p");          // create p
                            content.setAttribute("id", "productContent");       // set id and name
                            content.innerHTML = motorOnderdelen[i].omschrijving;       // set content in p
                        
                            var contentMerk = document.createElement("p");          // create p
                            contentMerk.setAttribute("id", "productEigenschappen");       // set id and name
                            contentMerk.innerHTML = motorOnderdelen[i].eigenschappen;       // set content in p
                        
                            var createImage = new Image();                          // create img tag
                            createImage.src = imagesMap + motorOnderdelen[i].afbeelding;      
                            createImage.setAttribute("class", "productImg");        // set class and name

                            divImg.appendChild(createImage);
                            div.appendChild(close);                                  // insert close button to div
                            div.appendChild(titel);                                  // insert title to div              
                            div.appendChild(content);                                // insert p to div
                            div.appendChild(contentMerk);                            // insert p to div
                            div.appendChild(back);
                                                                                     // set div in article
                            article.appendChild(divImg);
                            article.appendChild(div);                                // set div in article
                        
                            document.getElementById(article);                       // set article in document body
                            document.body.appendChild(article);
                            
                    }
                    
                getDatabase();
                    
                 }, false);
            }
            }
            
                                          
            function closeBlock(){  
                var close = document.getElementsByTagName('article')[0];  
                
                if(close.style.display === "block"){
                   close.style.display = "none";
                    }
                
                else {
                    close.style.display = "block";
                }
    
            }
          
    </script>



Mijn stappenplan.

1. Maak een database aan met alle onderdelen welke ik per product wil laten zien.
2. Ik maak alvast alle html aan welke ik nodig heb per object.
3. Vervolgens wil ik onclick het goede object aanspreken en daar zit het probleem in.

Doel: Klik je op een area, haal dan het goede object op en genereer op basis van het object de html.
Nu zou ik de volgende code per object kunnen kopiëren en plakken.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
var main = document.getElementById("main");         // get main tag
                            var article = document.createElement("article");    // create   articletag
                            
                            var div = document.createElement("div");            // create a div tag
                            div.setAttribute("class", "productContent");        // set class and name
                        
                            var close = document.createElement("span");         // back span (button)
                            close.setAttribute("class", "close");        
                            close.onclick = function(){                         // onclick call a function
                                closeBlock();
                            }  
                        
                            var back = document.createElement("span");         // back span (button)
                            back.setAttribute("class", "back");  
                            back.textContent = "Terug naar home";
                        
                            var divImg = document.createElement("div");            // create a div tag
                            divImg.setAttribute("class", "productImg");        // set class and name
                            
                            var titel = document.createElement("h1");          // create h1
                            titel.setAttribute("id", "productTitle");           // set id en name
                            titel.innerHTML = brakedisk.titel;                // set titel in h1
                        
                            var content = document.createElement("p");          // create p
                            content.setAttribute("id", "productContent");       // set id and name
                            content.innerHTML = brakedisk.omschrijving;       // set content in p
                        
                            var contentMerk = document.createElement("p");          // create p
                            contentMerk.setAttribute("id", "productEigenschappen");       // set id and name
                            contentMerk.innerHTML =brakedisk.eigenschappen;       // set content in p
                        
                            var createImage = new Image();                          // create img tag
                            createImage.src = imagesMap + brakedisk.afbeelding;      
                            createImage.setAttribute("class", "productImg");        // set class and name

                            divImg.appendChild(createImage);
                            div.appendChild(close);                                  // insert close button to div
                            div.appendChild(titel);                                  // insert title to div              
                            div.appendChild(content);                                // insert p to div
                            div.appendChild(contentMerk);                            // insert p to div
                            div.appendChild(back);
                                                                                     // set div in article
                            article.appendChild(divImg);
                            article.appendChild(div);                                // set div in article
                        
                            document.getElementById(article);                       // set article in document body
                            document.body.appendChild(article);


Een mooie oplossing is dat ik kan zien of ik op een 'brakedisk' klik op of een 'tandwiel' en vervolgens het bovenstaande door kan lopen op basis van waar je op kunt klikken. Ik hoop dat ik het zo duidelijk heb kunnen uitleggen.

Bedankt voor de reacties.
 
Rob Doemaarwat

Rob Doemaarwat

08/07/2018 21:59:33
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
var geklikt = document.getElementById(this.id);
                brakedisk.addEventListener('click', function(e){

De this.id staat dus buiten de onclick ...
Gewijzigd op 08/07/2018 22:27:47 door Rob Doemaarwat
 
Jan Graneker

Jan Graneker

10/07/2018 14:08:24
Quote Anchor link
Bedankt voor je reactie Rob.
Dit is precies het probleem, bedankt voor jouw oplossing.

Door van THIS gebruikt te maken, dacht ik het goede op te vragen, alleen vroeg ik hiermee het Window op.
Door het binnen het klik event te zetten werkt het wel.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.