Html Question posted in
Some basic documentation can be found here.

Html – Why doesn't this button work when clicked?

Working on a personal website, trying to make the style of the side bar change widths when the sidebar button clicked. I don’t know why it isn’t. I don’t want much help other than that as I am trying to teach myself. Tips would be greatly appreciated but I don’t really want any major complicated changes that I won’t understand because I am only a few weeks in.

const sidebarBut = document.querySelector('.sideBarBut');
sidebarBut.addEventListener('click', animate);

function animate(){
    document.querySelector('.sidebar').style.width = "400px";
}
/*--------|--------*/
.sideBarBut {
    transform: scale(0.065);
    background-color: black;
    position: fixed;
    bottom: 742.5px;
    left: -235px;
    cursor: pointer;
}

.sideBarBut:hover {
    filter: brightness(80%);
}

.sidebarTitle {
    color: white;
    position: fixed;
    top: -50px; /*7px*/
    left: 95px;
    font-size: 28px;
    font-family: sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.sidebar {
    z-index: 1000;
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    border-right: 0px solid transparent;
}

.animate {
    animation-play-state: paused;
    animation-name: sidebarOpen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes sidebarOpen {
    0% {
        width: 0;
    }
    100% {
        width: 250px;
        border-right: 2px solid white;
    }
}

@keyframes sidebarClosed {
    0% {
        width: 250px;
    }
    100% {
        width: 0;
        border-right: 0px solid transparent;
    }
}

.projectLinks {
    width: 200px;
    position: fixed;
    top: 40px;
    left: -1000px; /*20px*/
    color: white;
    list-style: none;
    padding-left: 0;
}

.projects {
    text-decoration: none;
    color: inherit;
    font-size: 20px;
    font-family: sans-serif;
    line-height: 30px;
}

.projects:hover {
    color: rgb(200, 200, 200);
}
   <section>
            <div class="sidebar animate">
                <button type="button" class="sideBarBut"><img src="img/sidebar.png"></button>
                <span class="sidebarTitle">Projects</span>
                <ul class="projectLinks">
                    <li><a class="projects" href="projects/Tic Tac Toe Project copy/index.html">Tic Tac Toe Project</a></li>
                    <li><a class="projects" href="projects/color changer proj/index.html">Color Changer Project</a></li>
                </ul>
            </div>
        </section>
        <script src="sidebar.js"></script>
Tags:

2

Answers


  1. 0

    I saw this error in your code. Instead of animate, it should be animate() rather.
    In order not confuse yourself, break document.querySelector('.sidebar').style.width = "400px"; in something understandable and functionale. Like this.

    function animate(){
let sidebar = document.querySelector('.sidebar');
sidebar.style.width = '480px';
    Login or Signup to reply.
  2. 0

    Based on my understanding, if your goal is to have the sidebar’s width transition from 0px to 400px when the button is clicked, you can remove the "animate" class from the HTML <div class="sidebar animate"> or the associated CSS block

    .animate {
    animation-play-state: paused;
    animation-name: sidebarOpen;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

    The animation will then be governed by the styles applied directly to the "sidebar" class, and your code should function as intended.

    I prefer the concise style for writing the JS code because the code is short and doesn’t require separation into a separate function, especially when the logic is straightforward and won’t be reused elsewhere.

    const sidebarBut = document.querySelector(".sideBarBut");

sidebarBut.addEventListener("click", () => {

  const sidebar = document.querySelector(".sidebar");
  sidebar.style.width = "400px";

});

    I have an alternative solution for your code. If your goal is to activate the animation when the button is clicked, it makes more sense to edit the .animate class rather than the .sidebar class. Here is a modified version of the JS code to achieve this:

    const sidebarBut = document.querySelector(".sideBarBut");

sidebarBut.addEventListener("click", animate);

function animate() {
  const sidebar = document.querySelector(".animate");
  sidebar.style.animationPlayState = "running";
}

    or

    const sidebarBut = document.querySelector(".sideBarBut");

sidebarBut.addEventListener("click", () => {

  const sidebar = document.querySelector(".animate");
  sidebar.style.animationPlayState = "running";

});

    To run the animation exclusively for the sidebar, you can dynamically add or remove the animate class to the sidebar element. This allows precise control over the animation without impacting other elements. Here’s an example JS code:

    const sidebarBut = document.querySelector(".sideBarBut");

sidebarBut.addEventListener("click", () => {

  const sidebar = document.querySelector(".sidebar");
  sidebar.classList.add("animate"); //classList.toggle || classList.remove

});

    You’ve got it right! It’s essential to have the .animate class set with animation-play-state: paused; initially. To maintain control, consider removing the animate class from all relevant elements and toggling it selectively when needed. This approach ensures precise management of when the animation should run. If you want the other elements to appear, you’d toggle their coordinates when the button is clicked.

    Hope that was helpful to you!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search