-1

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 class="main-content">
    <header class="section sec1 header active"></header>
    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 blogs"></section>
        <section class="section sec5 contact"></section>
    </main>

    <div class="controls">
        <div class="control control-1 active-btn" data-id="header">
            <i class="fas fa-home"></i>
        </div>
        <div class="control control-2" data-id="about">
            <i class="fas fa-user"></i>
        </div>
        <div class="control control-3" data-id="portfolio">
            <i class="fas fa-briefcase"></i>
        </div>
        <div class="control control-4" data-id="blogs">
            <i class="fas fa-newspaper"></i>
        </div>
        <div class="control control-5" data-id="contact">
            <i class="fas fa-envelope-open"></i>
        </div>       
    </div>

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

Due to this the background color does not change. Any idea on how to fix that ? Thanks !

Emile Youssef FEGHALI EL
  • 129
  • 1
  • 12

2 Answers2

2

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 class="main-content">
    <header class="section sec1 header active"></header>
    <main>
        <section class="section sec2 about"></section>
        <section class="section sec3 portfolio"></section>
        <section class="section sec4 blogs"></section>
        <section class="section sec5 contact"></section>
    </main>

    <div class="controls">
        <div class="control control-1 active-btn" data-id="header">
            <i class="fas fa-home"></i>
        </div>
        <div class="control control-2" data-id="about">
            <i class="fas fa-user"></i>
        </div>
        <div class="control control-3" data-id="portfolio">
            <i class="fas fa-briefcase"></i>
        </div>
        <div class="control control-4" data-id="blogs">
            <i class="fas fa-newspaper"></i>
        </div>
        <div class="control control-5" data-id="contact">
            <i class="fas fa-envelope-open"></i>
        </div>       
    </div>

    <script src="C:\Users\emile\Desktop\Portfolio Website\app.js"></script>
</body>
</html>
Ankit
  • 1,359
  • 1
  • 2
  • 15
1

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.

Ritik Mewada
  • 26
  • 1