JavaScript-DOM/18_function_reference.js at master · last-endcode/JavaScript-DOM · GitHub

27 lines (24 loc) · 796 Bytes

// 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);

Expand file tree