Events in JavaScript
By Querying an element or class, JS can perform actions

var el = document.querySelector(name);

document.querySelector('.firstName').focus();
Changes the focus to the First Name input box

Interacting with a Button
Giving the button an id
and assigning a function in JavaScript

.onClick


    document.querySelector('#btn1').onclick = 
    function() {
        alert("Clicked");
    };
    
or by assigning the query to a variable and calling the function

    var goBtn = document.querySelector('#myBtn')
    goBtn.onclick = function() {
        alert("You just Clicked");
    }
    

.addEventListener


    var secondMove = function() {
        onClick="alert('From the HTML')" 
        onmouseover=this.style.color='green' 
        onmouseout=this.style.color='blue' 
        onmousedown=this.style.color='red'
    }
    goBtn.addEventListener('click',secondMove)
    
but instead of creating a function in the .js file
it can be written in the element itself

    
    


back to main page