Question

app.js：12 未捕获的类型错误：无法读取 HTMLDivElement 中未定义的属性（读取‘className’）。<anonymous>（app.js：12：53）

2022-11-16

2945

javascript html css typeerror anonymous

我遇到了一个问题。我有一个网站，右边有一些按钮。使用 JS，我想更改我们点击的按钮的样式。当您进入页面时，主页按钮将具有 background-color: green 。但是当您单击另一个按钮时，主页按钮 background-color 变为黑色/灰色。但是您单击的按钮的 background-color 将保持黑色/灰色，并且控制台中不会出现任何错误。但是当您在第一次单击后单击任何其他按钮时， background-color 将保持灰色/黑色，但控制台中会出现错误： app.js:12 Uncaught TypeError: 无法读取 HTMLDivElement 中未定义的属性（读取“className”）。<anonymous> (app.js:12:53)

代码：

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>

因此背景颜色不会改变。有没有什么办法可以解决这个问题？谢谢！

Answer 1

您已正确完成所有操作，但在提供类名时必须留出空格。

在您的 js 代码中

代替 this.className += 'active-btn';

您必须编写 this.className += ' active-btn';

只需一个空格“__”

现在您可以看到一切运行良好！

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>

Answer 2

您需要将此行 this.className += 'active-btn'; 更改为 sectBtn[i].classList.add("active-btn")

原因是，此关键字将指向当前类对象或功能，但在您的案例中，您需要获取您正在单击的 btn，并将类添加到该按钮。因此，我们使用 classList 在 html 元素中添加新类。