3.3 - JS + HTML Pt. 2

Making JavaScript react to user input

News

  • School uniform

  • CP is starting! Four teams are signed up (Survivors of Alderaan, Millenium Falcons, Wookie of the Year, It's a Trap!). Just waiting on verification.

    • Training materials are available.

    • TEAMS, MEET ME TOMORROW AT LUNCH PLEASE.

  • Replit tasks 2.1-2.3 are marked. Demo how to see comments.


Review

  • Pay attention during lessons / demos!

  • Images and links: ./ (this folder) vs ../ (back one folder) and the "root" folder

  • <head> vs "a heading"

  • Duplicating CSS in style.css or in multiple locations

  • Red underlines while coding...


Today's Lesson: 3.3 - JS + HTML Pt. 2

Last class we discovered the ability to manipulate HTML elements using document.getElementById("id")

We can create a handle to an element to make work easier:
let paragraph = document.getElementById("p1");

paragraph.innerHTML = "New content for the 'p' element.";


How about making our code run only when the user clicks a button or enters some data?

Event Listeners allow us to attach code to any HTML element. The element listens for the user to do a particular action known as an event (click, type, mouse hover, etc).

In-class demo can be found here (it's interactive if you want to try something in the code).

Important Notes & Resources:

  • For now our functions will be simple and have no parameters:
    function myFunctionName() {
    // Do some work
    }

  • There are lots of Event Listeners in JavaScript. For today (and most times) we will use the click event:
    If adding in HTML:
    <button id="okButton" onclick="myFunctionName()">Ok</button>
    If adding in JavaScript:
    document.getElementById("okButton").addEventListener("click", myFunctionName);

Today's Task(s) / Homework

Extra

  • You can attach multiple event listeners to the same HTML element so that many functions are called or different functions are called based on different actions.