ID ophalen van een geklikt event
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)
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)
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
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>
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?
Code (php)
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
Thomas van den Heuvel op 08/07/2018 16:39:53:
Regel 8?
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".
Code (php)
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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"
);
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)
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
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>
<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)
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
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);
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.
Code (php)
1
2
2
var geklikt = document.getElementById(this.id);
brakedisk.addEventListener('click', function(e){
brakedisk.addEventListener('click', function(e){
De this.id staat dus buiten de onclick ...
Gewijzigd op 08/07/2018 22:27:47 door Rob Doemaarwat
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.