JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<h1 id="hello">all your base are belong to us</h1>

JavaScript

var theH1 = document.getElementById('hello');
console.log(theH1.innerHTML);

/* 
*  When creating an event listener you can't pass it a parameter other
*  wise it calls the function as opposed to setting the event to use
*  that function.
*/

//theH1.onmouseover = alert('yo'); <--- Calls the function

/*
*  You can do this a few different ways, set it to a named function that
*  is defined elsewhere. Or set it to an anonymous function.
*/

// Named Function
theH1.onmouseover = addAlert; // <--- Assigns the function

function addAlert() {
    alert('yo');
}

// Anonymous Function
theH1.onmouseover = function(){
    alert('yo yourself!');
}

/*
*  Another way you could do this is to add an event listener to the
*  the element itself and assign the function that way. This is probably
*  the most popular and best method.
*/

theH1.addEventListener('mouseover', addAlert, false);