Почему то не работает js код

Question

let classpizdit = document.querySelector("#classpizdit");
let babijon = document.querySelector("#babijon");
classpizdit.addEventListener("click", function(evt) {
    babijon.classList.toggle("body1")
})

button {
   font-size: 15px;
   padding: 10px;
   border-radius: 5px;
   color:black;
   border: none;
   background-color: rgb(26, 129, 0);
}
 * {box-sizing: border-box;}
 body{margin: 0;}
 div {padding: 30px 0}
 form {
   position: relative;
   width: 300px;
   margin: 0 auto;
 }
 .d1 input {
   width: 100%;
   height: 42px;
   padding-left: 10px;
   border: 2px solid #7BA7AB;
   border-radius: 5px;
   outline: none;
   background: #F9F0DA;
   color: #9E9C9C;
 }
 .d1 button {
   position: absolute; 
   top: 0;
   right: 0px;
   width: 42px;
   height: 42px;
   border: none;
   background: #7BA7AB;
   border-radius: 0 5px 5px 0;
   cursor: pointer;
 }
 .d1 button:before {
   content: "\f002";
   font-family: FontAwesome;
   font-size: 16px;
   color: #F9F0DA;
 }
.bodyneodin {
  background-color: white;
}
.body1 {
  background-color: black;
}
.header1 h1 {
  color: bisque;
}
 .header1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mageazin {
  margin: 20px;
}
.beloenonecrasnoe {
  width: 50px;
  height: 50px;
}

<!DOCTYPE html>
<html lang="en" class="html1">
<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>Document</title>
    <link href=krasivoe.css rel="stylesheet">
</head>
<body class="body1 bodyneodin" id="babijon">
    <header class="header1">
        <img src="1.svg" class="beloenonecrasnoe" id="classpizdit">
        <h1 class="mageazin">
            Магазин мага Зина
        </h1>
        <div class="d1">
            <form>
            <input type="text" placeholder="Искать здесь...">
            <button type="submit"></button>
            </form>
        </div>
    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>
</html>

хотел чтобы при нажатие на солнце менялся с чёрного на белый цвет фона

Answer 1

Всё работает

let classpizdit = document.querySelector("#classpizdit");
let babijon = document.querySelector("#babijon");
classpizdit.addEventListener("click", function(evt) {
  babijon.classList.toggle("body1")
})

button {
  font-size: 15px;
  padding: 10px;
  border-radius: 5px;
  color: black;
  border: none;
  background-color: rgb(26, 129, 0);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

div {
  padding: 30px 0
}

form {
  position: relative;
  width: 300px;
  margin: 0 auto;
}

.d1 input {
  width: 100%;
  height: 42px;
  padding-left: 10px;
  border: 2px solid #7BA7AB;
  border-radius: 5px;
  outline: none;
  background: #F9F0DA;
  color: #9E9C9C;
}

.d1 button {
  position: absolute;
  top: 0;
  right: 0px;
  width: 42px;
  height: 42px;
  border: none;
  background: #7BA7AB;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

.d1 button:before {
  content: "\f002";
  font-family: FontAwesome;
  font-size: 16px;
  color: #F9F0DA;
}

.bodyneodin {
  background-color: white;
}

.body1 {
  background-color: black;
}

.header1 h1 {
  color: bisque;
}

.header1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mageazin {
  margin: 20px;
}

.beloenonecrasnoe {
  width: 50px;
  height: 50px;
}

<body class="body1 bodyneodin" id="babijon">
  <header class="header1">
    <img src="1.svg" class="beloenonecrasnoe" id="classpizdit">
    <h1 class="mageazin">
      Магазин мага Зина
    </h1>
    <div class="d1">
      <form>
        <input type="text" placeholder="Искать здесь...">
        <button type="submit"></button>
      </form>
    </div>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>

Answer 2

Просто надо было подключить js

    <script async src="nenavijujs.js"></script>

БЛОГ НА HUSL

Почему то не работает js код

Ответы (2 шт):