What's wrong in my code

JavaScript
1 
const btn = document.querySelector(".switch-btn");

btn.addEventListener("click", slide);


function slide() {
    btn.classList.toggle("slide");
}
2 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark mode</title>
<!-- font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- styles sheet -->
    <link rel="stylesheet" href="dark mode.css">
    <script src="dark mode.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header>
<div class="navbar">
<a href="#home"><i class="fa-solid fa-house"></i>Home</a>
<a href="#search"><i class="fa-solid fa-magnifying-glass"></i>Search</a>
<!-- switch button -->
<button class="switch-btn">
    <span>
        <i class="fa-regular fa-sun"></i>
    </span>
    <span>
        <i class="fa-regular fa-moon"></i>
    </span>
    <span class="switch">
        
    </span>
</button>
</div>
</header>
<div class="section-center">

</div>
<!-- script -->
<script src="dark mode.js"></script>
</body>
</html>
3 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    font-family: 'Poppins', sans-serif;
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
header{
    background-color: #FF8500;
    width: 100%;
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8% 1%;
}
.navbar a{
    color: #8500FF;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.1em;
    font-weight: 600;
    padding-left: 0.625em;
}
.navbar a:hover{
    color: #00FF85;
    transition-duration: 0.6s;
}

/* switch button */

.switch-btn {
    position: absolute;
    bottom: 8%;
    left: 85%;
    width: 7rem;
    height: 2rem;
    display: flex;
    border-radius: 0.5rem;
    align-items: center;
    justify-content: space-around;
    border: solid #8500FF;
    transition: width 2s ;
}
.switch-btn span {
    display: inline-block;
    font-size: 1.5rem;
    cursor: pointer;
    color: #000;
}
.switch {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #8500FF;
    opacity: 0.4;
    border-radius: 0.5rem;
    margin: 0;
    display: block;
    transition: all 0.5s linear;
}
.slide .switch {
    left: 50%;
}

.section-center{
    background-color: #000;
}
4

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

5

Captureq
Captureq1366×768 102 KB

6

it return the TypeError: btn is null to me with the SyntaxError: redeclaration of const btn
but I don’t know where’s the error and it’s my first time to face that

7

You have two links to your js file in your code. There is one up top, and you also link to it at the bottom. Thats causing issues

8

thanks i forgot to delete the one on the top and kept thinking the error is in my js code thanks very much

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.