03_dom/uebungen/u10_running-lights/assets/js/main.js

@@ -1,20 +1,56 @@
-'use strict';
-
-(() => {
-  // === DOM & VARS =======
-  const DOM = {};
-
-  const LIGHT_PATH_ON = 'assets/img/light_on.png';
-  const LIGHT_PATH_OFF = 'assets/img/light_off.png';
-
-  // === INIT =============
-  const init = () => {};
-
-  // === EVENTHANDLER =====
-
-  // === XHR/FETCH ========
-
-  // === FUNCTIONS ========
-
-  init();
-})();
+'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();
+})();