Div class is breaking the javascript Help!

JavaScript
1

How would I be able to keep .containerc in the code without removing it?

How would I fix that issue
https://jsfiddle.net/qrd19ye7/

  • “Script error.”
  • “529:8 Uncaught TypeError: Cannot read property ‘classList’ of null”

When .containerc is removed from the code, the whole code works.
https://jsfiddle.net/9bhqkujo/

The images are able to be clicked and everything shows.

<div class="containerc">
		<svg class="playa " width="100%" height="100%" viewBox="0 0 64 64">
			<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
		</svg>
		<svg class="playb" width="100%" height="100%" viewBox="0 0 64 64">
			<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
      M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
		</svg>
	</div>


(function manageCovera() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const theplay = cover.parentElement.querySelector(".playb");
    hide(theplay);
    const thewrap = cover.parentElement.querySelector(".containera");
    show(thewrap);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

(function manageCoverb() {

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    hide(cover);
    const theplay = cover.parentElement.querySelector(".playa");
    hide(theplay);
    const thewrap = cover.parentElement.querySelector(".containerb");
    show(thewrap);

  }

  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());
2

To me that means that somewhere you are trying to access the “classlist” property of a variable that is null. This is a big no-no in JS. You can never access a property of a primitive. For most primitives, boxing prevents them from crashing, but for null and undefined, they crash.

I would log out the value of everything for which you are trying to access that property, literally go to everything place you are using that and on the line before, use a log statement. Unless you are good at dev tools - then you can step through the code.

3

When .containerc is removed from the code, the whole code works.

Removed from the html/css Never referenced in js.
https://jsfiddle.net/9bhqkujo/

The images are able to be clicked and everything shows.

Wouldn’t that mean that something would need to be adjusted in the javascript?

.containerc is never referenced in the javascript.

4

I’m just going off of what the error tells me. When JS tries to tell me what is wrong, I listen.

1 Like
5

The click target parent element does not have a .containera element inside it. Log out the elements you are selecting inside coverClickHandler.

const thewrap = cover.parentElement.querySelector(".containera");
console.log(thewrap); // null

Just as an aside. I would suggest you use a local development environment when working on this if you are not. It’s fine that you are posting code using jsfiddle but I wouldn’t suggest you develop using it.

1 Like
6

.containera needs to be a different element is what you are saying?

That has the hide on it though.

<div class="containera hide">

I am confused, I am not understanding what needs to be changed to what.

7

I’m just telling you what the problem it. It’s your app I have no idea what you are trying to do.

Code with comments 
<div class="containerc">
	<svg class="playa " width="100%" height="100%" viewBox="0 0 64 64">
		<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z"></path>
	</svg>
	<svg class="playb" width="100%" height="100%" viewBox="0 0 64 64">
		<path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z"></path>
	</svg>
</div>

function coverClickHandler(evt) {
  const cover = evt.currentTarget;
  console.log(cover) // click target
  hide(cover);
  const theplay = cover.parentElement.querySelector(".playb");
  console.log(theplay) // click target > parentElement > playb child
  hide(theplay);
  const thewrap = cover.parentElement.querySelector(".containera");
  console.log(thewrap); // click target > parentElement > null > there is no such element inside the containerc parent element
  // show(thewrap);
  const curtain = document.querySelector(".curtain");
  curtain.classList.add("slide");
}
8

I was just told this:

But I’m still confused on how to fix it.

Your markup structure is:

div.containerc
  svg.playa
  svg.playb
cover refers to either svg.playa or svg.playb. So this refers to div.containerc:

cover.parentElement
Which means this refers to a descendant of div.containerc that contains the class .containerb:

cover.parentElement.querySelector(".containerb");
As we see from your structure, no such element exists.

null is then passed to show() as the el argument:

show(thewrap);
Which means this line refers to the .classList property on null:

el.classList.remove("hide");
Which matches our error:

Uncaught TypeError: Cannot read property 'classList' of null

You need to find an actual reference to .containerb
9

In fixing the issue I think I am only able to do:

Code 1

const thewrap = cover.parentElement.parentElement.querySelector(".containera");

Code 2

let thewrap = cover.parentElement.parentElement;
thewrap = thewrap.querySelector(".containera");

Code 3

const thewrap = cover.parentElement
.parentElement.querySelector(".containera");

Unless if someone knows of a different way it would work.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.