dont log non existent name
This commit is contained in:
15
index.html
15
index.html
@@ -89,7 +89,6 @@
|
|||||||
wrapper.style.marginTop = "12px";
|
wrapper.style.marginTop = "12px";
|
||||||
wrapper.className = "car-block";
|
wrapper.className = "car-block";
|
||||||
|
|
||||||
// --- elementen ---
|
|
||||||
const carSelect = document.createElement("select");
|
const carSelect = document.createElement("select");
|
||||||
carSelect.className = "car-select";
|
carSelect.className = "car-select";
|
||||||
|
|
||||||
@@ -108,16 +107,14 @@
|
|||||||
wrapper.appendChild(img);
|
wrapper.appendChild(img);
|
||||||
carList.appendChild(wrapper);
|
carList.appendChild(wrapper);
|
||||||
|
|
||||||
// --- cars ophalen ---
|
|
||||||
const url = '/cars';
|
const url = '/cars';
|
||||||
const res = await fetch(url);
|
const res = await fetch(url);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
const cars = data.cars; // array met cars
|
const cars = data.cars;
|
||||||
|
|
||||||
console.log(cars);
|
console.log(cars);
|
||||||
|
|
||||||
// cars inladen
|
|
||||||
cars.forEach(car => {
|
cars.forEach(car => {
|
||||||
let o = document.createElement("option");
|
let o = document.createElement("option");
|
||||||
o.value = car.name; // of car.id
|
o.value = car.name; // of car.id
|
||||||
@@ -125,7 +122,6 @@
|
|||||||
carSelect.appendChild(o);
|
carSelect.appendChild(o);
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- helper: laad skins voor de geselecteerde car ---
|
|
||||||
function loadSkins(carName) {
|
function loadSkins(carName) {
|
||||||
const car = cars.find(c => c.name === carName);
|
const car = cars.find(c => c.name === carName);
|
||||||
skinSelect.innerHTML = "";
|
skinSelect.innerHTML = "";
|
||||||
@@ -137,27 +133,23 @@
|
|||||||
skinSelect.appendChild(o);
|
skinSelect.appendChild(o);
|
||||||
});
|
});
|
||||||
|
|
||||||
// direct de eerste skin tonen
|
// show first stkin
|
||||||
try {
|
try {
|
||||||
updateImage(car.skins[0].image);
|
updateImage(car.skins[0].image);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("No image for skin " + car.skins[0].name);
|
|
||||||
updateImage("");
|
updateImage("");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- helper: update image ---
|
|
||||||
function updateImage(imgPath) {
|
function updateImage(imgPath) {
|
||||||
img.src = imgPath;
|
img.src = imgPath;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- event: auto veranderen ---
|
|
||||||
carSelect.addEventListener("change", () => {
|
carSelect.addEventListener("change", () => {
|
||||||
const selectedCar = carSelect.value;
|
const selectedCar = carSelect.value;
|
||||||
loadSkins(selectedCar);
|
loadSkins(selectedCar);
|
||||||
});
|
});
|
||||||
|
|
||||||
// --- event: skin veranderen ---
|
|
||||||
skinSelect.addEventListener("change", () => {
|
skinSelect.addEventListener("change", () => {
|
||||||
const selectedCar = carSelect.value;
|
const selectedCar = carSelect.value;
|
||||||
const selectedSkin = skinSelect.value;
|
const selectedSkin = skinSelect.value;
|
||||||
@@ -168,12 +160,11 @@
|
|||||||
try{
|
try{
|
||||||
updateImage(cfg.image);
|
updateImage(cfg.image);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("No image for skin " + selectedSkin);
|
|
||||||
updateImage("");
|
updateImage("");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// laad skins voor de eerste auto direct
|
// immediately load skins for first car
|
||||||
loadSkins(cars[0].name);
|
loadSkins(cars[0].name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user