Thomas van den Heuvel op 08/07/2018 16:39:53
Regel 8?
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.
[size=xsmall]
Toevoeging op 08/07/2018 20:23:18:[/size]
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)
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"
);
<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.
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.
