Kevin Powell - Community•15mo ago

JavaScript/webpack - issue with event listener in my index.js file

I am working on the Restaurant Page project from The Odin Project (https://www.theodinproject.com/lessons/node-path-javascript-restaurant-page). I'm new to using webpack and keep running into issues. The latest one is that the event listener in my renderNavbar() prevents the page from rendering, even with Live Server on. If anyone can help, I'd greatly appreciate it. My code is in the src directory of my repo: https://github.com/savvystrider/webpack-restaurant-page

GitHub

GitHub - savvystrider/webpack-restaurant-page: Odin Project

Odin Project. Contribute to savvystrider/webpack-restaurant-page development by creating an account on GitHub.

14 Replies

ἔρως•15mo ago

can you press f12 and share the errors you get in the console? also, you didn't set your public path

savvystrider15OP•15mo ago

The error is: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') What do you maen by public path?

ἔρως•15mo ago

i was wrong, you have this: https://github.com/savvystrider/webpack-restaurant-page/blob/main/webpack.config.js#L7C6-L7C6

GitHub

webpack-restaurant-page/webpack.config.js at main · savvystrider/we...

Odin Project. Contribute to savvystrider/webpack-restaurant-page development by creating an account on GitHub.

ἔρως•15mo ago

im sure the error has A LOT more than just that

savvystrider15OP•15mo ago

ἔρως•15mo ago

you're trying to get an element that doesn't exist https://github.com/savvystrider/webpack-restaurant-page/blob/main/src/index.js#L9 ^ the renderNavbar is defined here can i copy and paste the contents of that file here?

savvystrider15OP•15mo ago

Sure, do I need to enable that?

ἔρως•15mo ago

nah

import "./style.css";
import PizzaImg from "./girl-with-red-hat-pizza.jpg";
import { renderMenu } from "./menu";

function clearPage() {
  document.body.innerHTML = "";
}

function renderNavbar() {
  const header = document.createElement("header");
  const nav = document.createElement("nav");
  const ul = document.createElement("ul");

  ul.innerHTML = `
    <li><a href="#" id="home-link">Home</a></li>
    <li><a href="#" id="menu-link">Menu</a></li>
    <li><a href="#" id="about-link">About</a></li>
  `;

  nav.appendChild(ul);
  header.appendChild(nav);

  document
    .getElementById("menu-link")
    .addEventListener("click", handleMenuClick);

  return header;
}

function handleMenuClick() {
  clearPage();
  const menuContent = renderMenu();
  document.body.appendChild(menuContent);
}

function renderHero() {
  const heroContainer = document.createElement("div");
  heroContainer.classList.add("hero-container");

  const h1 = document.createElement("h1");
  h1.textContent = "Crusters";

  const subtitle = document.createElement("p");
  subtitle.classList.add("subtitle");
  subtitle.textContent =
    "Welcome to Crusters, where pizza becomes a culinary adventure! Indulge in our unique gourmet crusts, crafted with extraordinary ingredients like pumpkin spice, super gluten, spiked chia seeds, and more.";

  const imageContainer = document.createElement("div");
  imageContainer.classList.add("image-container");

  const img = new Image();
  img.src = PizzaImg;
  imageContainer.appendChild(img);

  heroContainer.appendChild(h1);
  heroContainer.appendChild(subtitle);
  heroContainer.appendChild(imageContainer);

  return heroContainer;
}

function body() {
  const bodyContainer = document.createElement("div");
  bodyContainer.appendChild(renderNavbar());
  bodyContainer.appendChild(renderHero());
  return bodyContainer;
}

document.body.appendChild(body());

import "./style.css";
import PizzaImg from "./girl-with-red-hat-pizza.jpg";
import { renderMenu } from "./menu";

function clearPage() {
  document.body.innerHTML = "";
}

function renderNavbar() {
  const header = document.createElement("header");
  const nav = document.createElement("nav");
  const ul = document.createElement("ul");

  ul.innerHTML = `
    <li><a href="#" id="home-link">Home</a></li>
    <li><a href="#" id="menu-link">Menu</a></li>
    <li><a href="#" id="about-link">About</a></li>
  `;

  nav.appendChild(ul);
  header.appendChild(nav);

  document
    .getElementById("menu-link")
    .addEventListener("click", handleMenuClick);

  return header;
}

function handleMenuClick() {
  clearPage();
  const menuContent = renderMenu();
  document.body.appendChild(menuContent);
}

function renderHero() {
  const heroContainer = document.createElement("div");
  heroContainer.classList.add("hero-container");

  const h1 = document.createElement("h1");
  h1.textContent = "Crusters";

  const subtitle = document.createElement("p");
  subtitle.classList.add("subtitle");
  subtitle.textContent =
    "Welcome to Crusters, where pizza becomes a culinary adventure! Indulge in our unique gourmet crusts, crafted with extraordinary ingredients like pumpkin spice, super gluten, spiked chia seeds, and more.";

  const imageContainer = document.createElement("div");
  imageContainer.classList.add("image-container");

  const img = new Image();
  img.src = PizzaImg;
  imageContainer.appendChild(img);

  heroContainer.appendChild(h1);
  heroContainer.appendChild(subtitle);
  heroContainer.appendChild(imageContainer);

  return heroContainer;
}

function body() {
  const bodyContainer = document.createElement("div");
  bodyContainer.appendChild(renderNavbar());
  bodyContainer.appendChild(renderHero());
  return bodyContainer;
}

document.body.appendChild(body());

can you see the last line? NOTHING exists in the body until the function body returns and inside renderNavbar you are doing document.getElementById("menu-link")

savvystrider15OP•15mo ago

Ah ok, I need to actually render an element to the DOM before I can attach an event listener

ἔρως•15mo ago

you're trying to get an element that doesn't exist at all no there's a way of doing this: instead of doing this:

document
  .getElementById("menu-link")
  .addEventListener("click", handleMenuClick);

document
  .getElementById("menu-link")
  .addEventListener("click", handleMenuClick);

you could do this:

ul.querySelector("#menu-link")
  .addEventListener("click", handleMenuClick);

ul.querySelector("#menu-link")
  .addEventListener("click", handleMenuClick);

the idea is simple: you don't need to have an element in the body to give it an event handler

savvystrider15OP•15mo ago

Oh wow, didn't know I could do that Made the update as you suggested, ran the build, and it works as expected. Thank you so much!

ἔρως•15mo ago

you're welcome this is something that i don't often see explained in tutorials and things like that if i were you, i wouldn't do the way you're doing things for learning, this is perfectly fine, and will work as you want but instead of always generating 100% of the document in javascript, you should consider having the html in the html file, and then you can add the javascript functionality to do the stuff you need the disadvantage of your method is that if something goes wrong, there's nothing on the page

savvystrider15OP•15mo ago

lol I mainly wanted some experience with webpack, didn't realize how complicated this would get. Definitely don't plan on on setting up another project like this unless it's suited for it

ἔρως•15mo ago

you're still on time to change it i understand that this was done for learning webpack and stuff but, honestly, what you've done so far requires 0 lines of javascript to work, so, it wouldn't be an impressive exercise besides practicing, your solution has the advantage of everything being done in places you can easily change

Gaming

Programming

JavaScript/webpack - issue with event listener in my index.js file