function reference

last-endcode · last-endcode · commit 074078607050 · 2020-10-27T14:53:54.000+07:00
diff --git a/18_function_reference.js b/18_function_reference.js
@@ -0,0 +1,27 @@
+// select element
+// addEventListener
+// what event,
+// and what to do (callback function/annonymous funciton/function reference)
+
+const btn = document.querySelector('.btn');
+const h3 = document.querySelector('h3');
+
+// callback as function reference
+function changeColors() {
+  let hasClass = h3.classList.contains('red');
+  //   first if click join will false and move to else
+  // second if click again will true and remove class red
+  // cause h3 has red class
+  if (hasClass) {
+    //false cz no has red class on h3
+    h3.classList.remove('red');
+    console.log(hasClass);
+  } else {
+    //   true and add class red on h3
+    h3.classList.add('red');
+    console.log(hasClass);
+  }
+}
+
+// remember don't invoking() callback if callback function
+btn.addEventListener('click', changeColors);
diff --git a/index.html b/index.html
@@ -162,6 +162,7 @@ <h3>The Pirates</h3>
     <!-- <script src="/14_innerText_prepend.js"></script> -->
     <!-- <script src="/15_remove_removeChild.js"></script> -->
     <!-- <script src="/16_innerHTML_textContent.js"></script> -->
-    <script src="/17.addEventListener.js"></script>
+    <!-- <script src="/17.addEventListener.js"></script> -->
+    <script src="/18_function_reference.js"></script>
   </body>
 </html>
