59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
'use strict';
|
|
|
|
(() => {
|
|
// === DOM & VARS =======
|
|
|
|
const module = document.querySelector('.light-bulbs') || console.warn('no light-bulbs to select');
|
|
|
|
const DOM = {
|
|
module,
|
|
lights: module.querySelectorAll('img'),
|
|
};
|
|
|
|
const LIGHT_PATH_ON = 'assets/img/light_on.png';
|
|
const LIGHT_PATH_OFF = 'assets/img/light_off.png';
|
|
|
|
// === INIT =============
|
|
const init = () => {
|
|
DOM.lights.forEach((img) => {
|
|
img.addEventListener('mouseenter', bulbEnterVariant1b);
|
|
// img.addEventListener('click', bulbEnterVariant1b);
|
|
});
|
|
};
|
|
|
|
// === EVENTHANDLER =====
|
|
// Das ist die korrekte Antwort nach Aufgaben Text, aktuelles Licht aus, nächstest Licht an
|
|
const bulbEnterVariant1a = (e) => {
|
|
const img = e.target;
|
|
let nextImg = img.nextElementSibling;
|
|
|
|
img.src = img.src.replace('light_on', 'light_off');
|
|
|
|
if (!img.nextElementSibling) {
|
|
nextImg = DOM.lights[0];
|
|
}
|
|
|
|
nextImg.src = nextImg.src.replace('light_off', 'light_on');
|
|
};
|
|
|
|
// das ist, denke ich, die WIRKLICH korrekte version, who alle anderen Lichter ausgeschaltet werden, ansonsten ist da nicht mehr viel mit "chasen"
|
|
const bulbEnterVariant1b = (e) => {
|
|
const imgEl = e.target;
|
|
let nextImgEl = imgEl.nextElementSibling;
|
|
|
|
if (!imgEl.nextElementSibling) {
|
|
nextImgEl = DOM.lights[0];
|
|
}
|
|
|
|
DOM.lights.forEach((img) => {
|
|
img.src = img === nextImgEl ? LIGHT_PATH_ON : LIGHT_PATH_OFF;
|
|
});
|
|
};
|
|
|
|
// === XHR/FETCH ========
|
|
|
|
// === FUNCTIONS ========
|
|
|
|
init();
|
|
})();
|