app.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'className') at-CodePudding

I have ran into a problem. I have a website and some buttons to the right. using JS, I want to change the style of the button we click on. When you land on the page, the home button will have a background-color: green. But when you click another button, the home button background-color becomes black/gray. But the background-color of button you clicked will stay black/gray and no error will appear in the console. But when you click any other button after clicking the first time, the background-color will stay gray/black but an error appears in the console : app.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.<anonymous> (app.js:12:53)

The code :

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSection = document.querySelector('.main-content');


function PageTransitions() {
    // Button click active class
    for (let i = 0; i < sectBtn.length; i  ) {
        sectBtn[i].addEventListener('click', function() {
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className  = 'active-btn';
        })
    }
}

PageTransitions();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --color-primary: #191d2b;
  --color-secondary: #27AE60;
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-grey0: #f8f8f8;
  --color-grey-1: #dbe1e8;
  --color-grey-2: #b2becd;
  --color-grey-3: #6c7983;
  --color-grey-4: #454e56;
  --color-grey-5: #2a2e35;
  --color-grey-6: #12181b;
  --br-sm-2: 14px;
  --box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3);
}

body {
  background-color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--color-white);
  transition: all 0.4s ease-in-out;
}

a {
  display: inline-block;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

header {
  height: 100vh;
  color: var(--color-white);
  overflow: hidden;
}

section {
  min-height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 3rem 18rem;
}

.section {
  transform: translateY(-100%) scale(0);
  transition: all 0.4s ease-in-out;
  background-color: var(--color-primary);
}

.sec1 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec2 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec3 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec4 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec5 {
  display: none;
  transform: translateY(0) scale(1);
}

.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.controls .active-btn {
  background-color: var(--color-secondary) !important;
  transition: all 0.4s ease-in-out;
}
.controls .active-btn i {
  color: var(--color-white) !important;
}
.controls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-grey-4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.7rem 0;
  box-shadow: var(--box-shadow-1);
}
.controls .control i {
  font-size: 1.2rem;
  color: var(--color-grey-2);
  pointer-events: none;
}/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="file://C:\Users\emile\Desktop\Portfolio Website\styles\style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body >
    <header ></header>
    <main>
        <section ></section>
        <section ></section>
        <section ></section>
        <section ></section>
    </main>

    <div >
        <div  data-id="header">
            <i ></i>
        </div>
        <div  data-id="about">
            <i ></i>
        </div>
        <div  data-id="portfolio">
            <i ></i>
        </div>
        <div  data-id="blogs">
            <i ></i>
        </div>
        <div  data-id="contact">
            <i ></i>
        </div>       
    </div>

    <script src="C:\Users\emile\Desktop\Portfolio Website\app.js"></script>
</body>
</html>

CodePudding user response：

You have done everything right but you have to give space while giving the class name.

In your js code

in place of this.className = 'active-btn';

You have to write this.className = ' active-btn';

Just a space "__"

Now you can see things are working well!

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSection = document.querySelector('.main-content');


function PageTransitions() {
    // Button click active class
    for (let i = 0; i < sectBtn.length; i  ) {
        sectBtn[i].addEventListener('click', function() {
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className  = ' active-btn';
        })
    }
}

PageTransitions();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

:root {
  --color-primary: #191d2b;
  --color-secondary: #27AE60;
  --color-white: #FFFFFF;
  --color-black: #000;
  --color-grey0: #f8f8f8;
  --color-grey-1: #dbe1e8;
  --color-grey-2: #b2becd;
  --color-grey-3: #6c7983;
  --color-grey-4: #454e56;
  --color-grey-5: #2a2e35;
  --color-grey-6: #12181b;
  --br-sm-2: 14px;
  --box-shadow-1: 0 3px 15px rgba(0, 0, 0, .3);
}

body {
  background-color: var(--color-primary);
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  color: var(--color-white);
  transition: all 0.4s ease-in-out;
}

a {
  display: inline-block;
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

header {
  height: 100vh;
  color: var(--color-white);
  overflow: hidden;
}

section {
  min-height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 3rem 18rem;
}

.section {
  transform: translateY(-100%) scale(0);
  transition: all 0.4s ease-in-out;
  background-color: var(--color-primary);
}

.sec1 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec2 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec3 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec4 {
  display: none;
  transform: translateY(0) scale(1);
}

.sec5 {
  display: none;
  transform: translateY(0) scale(1);
}

.controls {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 3%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}
.controls .active-btn {
  background-color: var(--color-secondary) !important;
  transition: all 0.4s ease-in-out;
}
.controls .active-btn i {
  color: var(--color-white) !important;
}
.controls .control {
  padding: 1rem;
  cursor: pointer;
  background-color: var(--color-grey-4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.7rem 0;
  box-shadow: var(--box-shadow-1);
}
.controls .control i {
  font-size: 1.2rem;
  color: var(--color-grey-2);
  pointer-events: none;
}/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="file://C:\Users\emile\Desktop\Portfolio Website\styles\style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body >
    <header ></header>
    <main>
        <section ></section>
        <section ></section>
        <section ></section>
        <section ></section>
    </main>

    <div >
        <div  data-id="header">
            <i ></i>
        </div>
        <div  data-id="about">
            <i ></i>
        </div>
        <div  data-id="portfolio">
            <i ></i>
        </div>
        <div  data-id="blogs">
            <i ></i>
        </div>
        <div  data-id="contact">
            <i ></i>
        </div>       
    </div>

    <script src="C:\Users\emile\Desktop\Portfolio Website\app.js"></script>
</body>
</html>

CodePudding user response：

you need to change this line this.className = 'active-btn'; to sectBtn[i].classList.add("active-btn")

reason, this keyword will point current class object or functionality but in your case you need to take btn whichever you're clicking and add class to that button. So, we use classList for add new class in html element.