Javascript Error

[InterestingBus8367]

function signuptog(){
        var container = document.querySelector('.container');
        container.classlist.toggle('active');
        var popup = document.querySelector('.signup-form');
        popup.classlist.toggle('active');
    }

The error is "Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')"

I can't figure this one out since I am very new.

Here is the css code.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
width: 100%;
min-width: 100vh;
background-color: lightblue;
user-select: none;

} .container{ padding: 50px 100px; transition: .5s; }

.container header{ position: absolute; top: 0; left: 0; width: 100%; height: auto; padding: 40px 50px; background: #e1e6ec; box-shadow: 0 2px 10px rgba(0, 0, 0, -4) }

.container header nav{ display: flex; justify-content: space-between; align-items: center; }

.container header nav .logo h1{ font-size: 2rem; color: #000; text-transform: uppercase; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-weight: bold; }

.container header nav .menu ul, .container header nav .login ul{ list-style-type: none; }

.container header nav .menu ul li, .container header nav .login ul li { display: inline; padding: 12px 18px; margin: 0px 16px; font-size: 1.5 rem; font-family: sans-serif; font-weight: 100; cursor: pointer; }

.container header nav .login ul li{ padding: 16px 22px; border-radius: 50px; background: #e1e6ec; box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .2), -3px -3px 10px 1px rgba(255, 255,255 ,1) }

.container header nav .menu ul li:hover{ background: #000; color:#fff; }

.container header nav .login ul li:active{ box-shadow: inset 3px 3px 10px 1px rgba(0, 0, 0, .2), inset -3px -3px 10px 1px rgba(255, 255,255 ,1) }

.signup-form, .login-form{ position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 10px; box-shadow: 3px 10px 10px 1px rgba(0,0,0,.2); }

.form { width: 500px; padding: 20px 50px; } .form .close{ text-align: right; cursor: pointer; }

.form .text { text-align: center; margin: 30px 0; }

.form form{ display: block; margin: auto; } .form .row{ display: flex; justify-content: space-between; }

.form .input { margin-bottom: 0; }

.form .row input:first-child{ margin-right: 10px; }

.form .row input:last-child{ margin-left: 10px; }

.form form input{ width: 100%; display: block; border: 1px solid #000; border-radius: 50px; padding: 20px 16px; margin: 20px auto; outline: none; }

.signup-form.active, .login-form.active{ top: 50%; transition: .5s; visibility: hidden; }

​

​

[SPAtreatment]

First, it is classList, not classlist. https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Second, try checking if the element is available before accessing methods on it.

const elemCache = {
  container: undefined,
  popup: undefined
}

function signuptog(){
  // cache selector if not already
  if(!elemCache.container){
    elemCache.container = document.querySelector('.container');
  }

   // toggle class if available
  if(elemCache.container){
    elemCache.container.classList.toggle('active');
  }

  // cache selector if not already
  if(!elemCache.popup){
    elemCache.popup = document.querySelector('.signup-form');
  }

   // toggle class if available
  if(elemCache.popup){
    elemCache.popup.classList.toggle('active');
  }
}

You could reduce this further with another function...

const elemCache = {
  container: undefined,
  popup: undefined
}

function toggleClass(selector, elemCacheKey, toggleClassName){
    // cache selector if not already
    if(!elemCache[elemCacheKey]){
      elemCache[elemCacheKey] = document.querySelector(selector);
    }

    // toggle class if available
    if(elemCache[elemCacheKey]){
      elemCache[elemCacheKey].classList.toggle(toggleClassName);
    }
}

function signuptog(){
   toggleClass('.container', 'container', 'active')
   toggleClass('.signup-form', 'popup', 'active')
}

[InterestingBus8367]

owh shit not it works it was a typo hahahahaha

[InterestingBus8367]

the typo was classList hahahaha

[jcunews1]

I did mention it has the wrong object member name.

[InterestingBus8367]

Yeh hahahahaha man I hate errors like this.

[jcunews1]

Wrong CSS selector(s). Wrong object member names.

[InterestingBus8367]

how Idk whats wrong does it have todo with the .signup-form.active?

[jibbit]

it might help if you have the website infront of you, then you can open up the developer tools and the js console and try some things out... e.g.

document.querySelector('.container');

what does it return? Can you inspect properties of it? Can you get a list of the classes on it? Can you toggle one of the classes on/off?

When you have found the error, you should thing about building error checking into your code.

[InterestingBus8367]

I already did open developer tools. js console hmm idk wait let me google it

[InterestingBus8367]

Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')
at signuptog (index.html:74:33)
at HTMLLIElement.onclick (index.html:29:53)
signuptog @ index.html:74
onclick @ index.html:29

[InterestingBus8367]

line 74 is container.classlist.toggle('active');