How to register/unregister events in a dynamic way, using Vanilla JS

Question

I've spoken to my teacher and he told me that the reason why you would place the <script> element as last part of <body>, use onload= event directly on HTML-element, or in another way include the script in <body> (or deferring its execution), is because you want to guarantee that the script will only be activated once the DOM has been loaded, and the needed elements can be accessed. But... this is not the convention since it will be very difficult to scale in a solution where multiple HTML-documents are involved, sharing the same file resources such as JavaScript in this case. Instead, you'll handle this flow of execution by registering events properly using JS.

I've been told to put the Window Event load at the end my of JS file.

These are the error I get in booking.html: Uncaught TypeError: Cannot read property 'target' of undefined at addEvent (main.js:65) at start (main.js:10) addEvent.

Why do I get this error?

Here is my code:

function start() {

  let path = window.location.pathname;

  if (path.endsWith("contact.html")) {
    browserDetection;
  } else if (path.endsWith("employees.html") || path.endsWith("ourfleet.html")) {
    registerGalleryEvents();
  } else if (path.endsWith("booking.html")) {
    addEvent();
    getSeat();
  }

  /* browser detector  */

  var browserDetection = (function (agent) {
    switch (true) {
      case agent.indexOf("edge") > -1:
        return "MS Edge (EdgeHtml)";
      case agent.indexOf("edg") > -1:
        return "Microsoft Edge";
      case agent.indexOf("opr") > -1 && !!window.opr:
        return "Opera";
      case agent.indexOf("chrome") > -1 && !!window.chrome:
        return "Chrome";
      case agent.indexOf("trident") > -1:
        return "Internet Explorer";
      case agent.indexOf("firefox") > -1:
        return "Mozilla Firefox";
      case agent.indexOf("safari") > -1:
        return "Safari";
      default:
        return "other";
    }
  })(window.navigator.userAgent.toLowerCase());
  document.getElementById("specific-h3").innerHTML = "Here you can contact us if you have any questions. <br>\ <br>\ And by the way, you are using " + browserDetection + " browser.";


  function registerGalleryEvents() {
    const galleryImgs = document.querySelectorAll(".galleryImg");
    galleryImgs.forEach((galleryImg) => {
      galleryImg.addEventListener("click", () => {
        displayImage(galleryImg);
      });
    });
  }

  //declaring the displayImage function. reference: https://stackoverflow.com/a/65974064/14502646

  function displayImage(thumbnail) {
    const currentImgSrc = thumbnail.getAttribute("src");
    const [imgName, ext] = currentImgSrc.split(".");

    document.getElementById('myPicture').src = imgName + '-big.' + ext;
  }

  var seats = document.getElementsByClassName('grid-item')
  // Saving Javascript objects in sessionsStorage. 
  var data = JSON.parse(sessionStorage.getItem('bookingData'))


  function addEvent(event) {

    //Makes sure that the first 6 seats are Business class and the rest are Economy.
    if (parseInt(event.target.innerHTML) >= 1 && parseInt(event.target.innerHTML) <= 6) {
      document.getElementById('classType').innerHTML = 'Class Type: Business'
    } else {
      document.getElementById('classType').innerHTML = 'Class Type: Economy'
    }

    //event.target.innerHTML is the number of seat that is selected. 
    document.getElementById('seat').innerHTML = 'Seat Selected: ' + event.target.innerHTML
    document.getElementById('seatNumber').value = event.target.innerHTML
    var selectedSeats = document.getElementsByClassName("selected");
    if (selectedSeats.length > 0) {
      for (var j = 0; j < selectedSeats.length; j++) {
        selectedSeats.item(j).className = selectedSeats.item(j).className.replace('grid-item selected', 'grid-item');
      }
    }
    event.target.className = event.target.className + " selected";
  }

  for (var i = 0; i < seats.length; i++) {
    seats[i].addEventListener('click', addEvent)
  }

  var seatList = document.getElementsByClassName("grid-item")
  for (var i = 0; i < data.length; i++) {
    seatList.item(parseInt(data[i].seatNo) - 1).removeEventListener("click", addEvent)
    seatList.item(parseInt(data[i].seatNo) - 1).className = seatList.item(parseInt(data[i].seatNo) - 1).className.replace('grid-item', 'grid-item booked')
  }

  document.getElementsByClassName('reset').addEventListener('click', function () {
    location.reload()
  })

  function getSeat() {
    var inp = document.getElementsByClassName("grid-item selected");
    if (inp.length > 0) {
      var inputData = {
        firstName: document.getElementById('fname').value,
        lastName: document.getElementById('lname').value,
        identityNo: document.getElementById('identity').value,
        classType: document.getElementById('classType').innerHTML,
        seatNo: parseInt(document.getElementById('seatNumber').value)
      }

      if (JSON.parse(sessionStorage.getItem('bookingData')) != null) {
        var bookingData = JSON.parse(sessionStorage.getItem('bookingData'))
        bookingData.push(inputData)
        sessionStorage.setItem('bookingData', JSON.stringify(bookingData))
      } else {
        console.log('block')
        var bookingData = []
        bookingData.push(inputData)
        sessionStorage.setItem('bookingData', JSON.stringify(bookingData))
      }
      alert('Flight booked successfully.')
      window.print()
    } else {
      alert("Select a seat before proceeding!")
    }
  }
}

window.addEventListener("load", start);

Use `DOMContentLoaded`, not `load`. But `addEvent();` makes no sense and results in the error being thrown later, because `addEvent` requires an argument of the event — CertainPerformance, Feb 20 '21 at 15:45

How to register/unregister events in a dynamic way, using Vanilla JS

0 Answers0