stackoom
  简体   繁体   中英

app.js:12 Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.<anonymous> (app.js:12:53)

 原文  2022-11-16 13:01:12  8   2    javascript/ html/ css/ typeerror/ anonymous

Question

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 !

2 answers

solution1
 2  2022-11-16 13:42:42

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>

solution2
 1 ACCPTED  2022-11-16 13:44:04

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Uncaught TypeError: Cannot read properties of undefined (reading 'className') at HTMLDivElement.<anonymous> App.js:69 Uncaught TypeError: Cannot read properties of undefined (reading 'setState') Uncaught TypeError: Cannot read property 'addEventListener' of undefined at app.js:4 Uncaught TypeError: Cannot read properties of null (reading 'classList') at HTMLDivElement.<anonymous> app.js:6 Uncaught TypeError: Cannot read property 'addEventListener' of null Uncaught TypeError: Cannot read property 'push' of undefined on app.js:57 App.js:29 Uncaught TypeError: Cannot read property 'map' of undefined JavaScript app.js:110 Uncaught TypeError: Cannot read property 'id' of undefined Uncaught TypeError: Cannot read property 'classList' of null at HTMLDivElement.<anonymous> ProductScreen.js:12 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM