57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
'use strict';
|
|
|
|
(() => {
|
|
// === DOM & VARS =======
|
|
const module = document.querySelector('.light-bulbs');
|
|
const DOM = {
|
|
lightBulbs: Array.from(module.querySelectorAll('img[alt="lightbulb"]')),
|
|
};
|
|
|
|
const LIGHT_PATH_ON = 'assets/img/light_on.png';
|
|
const LIGHT_PATH_OFF = 'assets/img/light_off.png';
|
|
|
|
// console.log(DOM);
|
|
// === INIT =============
|
|
const init = () => {
|
|
setAllLightsOff();
|
|
|
|
DOM.lightBulbs.forEach((el, idx) => {
|
|
el.dataset.index = idx; // Index im HTMLImageElement ablegen (V1)
|
|
el.addEventListener('mouseenter', (e) => onMouseEnter(e, idx)); // Index als zweiten Parameter mitgeben (V2)
|
|
});
|
|
};
|
|
|
|
// === EVENTHANDLER =====
|
|
const onMouseEnter = (e, idx) => {
|
|
// const index = e.currentTarget.dataset.index;
|
|
const img = e.currentTarget;
|
|
const index = getIndexBy(img); // Index über Funktion ermitteln (V3)
|
|
|
|
// if (e.currentTarget.src.includes(LIGHT_PATH_ON)) {
|
|
const nextIndex = getNextIndex(index);
|
|
|
|
console.log(nextIndex);
|
|
setAllLightsOff();
|
|
DOM.lightBulbs[nextIndex].src = LIGHT_PATH_ON;
|
|
//
|
|
};
|
|
|
|
// === XHR/FETCH ========
|
|
|
|
// === FUNCTIONS ========
|
|
const getIndexBy = (img) => {
|
|
return DOM.lightBulbs.indexOf(img);
|
|
};
|
|
const getNextIndex = (currentIndex) => {
|
|
return currentIndex === DOM.lightBulbs.length - 1 ? 0 : currentIndex + 1;
|
|
};
|
|
|
|
const setAllLightsOff = () => {
|
|
DOM.lightBulbs.forEach((el) => {
|
|
el.src = LIGHT_PATH_OFF;
|
|
});
|
|
};
|
|
|
|
init();
|
|
})();
|