Search code examples
javascripthtmlcssscrollbarinnerhtml

When I first press a button it doesn't do my JavaScript until the second time I press it

I have a button that changes the style of the scrollbar, I want to make it show what color the scrollbar is currently set to, I have made it toggle with "innerHTML" but it doesn't activate the first time I press it, only the second time. This makes it say it's pink when it is really white.

Here is a example of my problem, just run the code and click on the button, it will say it's white when it is really pink and so on.

        const changeBtn = document.querySelector('.button');

        changeBtn.addEventListener('click', () => {
            document.body.classList.toggle('changed');
            changeBtn.classList.toggle("changed");
            if (changeBtn.innerHTML === "Change scrollbar color (current color: pink)") {
                changeBtn.innerHTML = "Change scrollbar color (current color: white)";
            } else {
                changeBtn.innerHTML = "Change scrollbar color (current color: pink)";
            }
        });
  .button {
    background-color: #ffffff;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    color: black;
    font-size: 20px;
  }
  
  body {
  background-color: #000;
  color: white;
  }
  
  
    /* CUSTOM SCROLL START */
  body::-webkit-scrollbar {
    width: 1em;
  }
  body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
      background-color: rgb(131, 69, 69);
  }
  body::-webkit-scrollbar-thumb {
    background-color: rgb(185, 115, 115);
    outline: 1px solid slategrey;
  }

  body.changed::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
    background-color: rgb(131, 69, 69);
}

body.changed::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
  outline: 1px solid slategrey;
}
  /* CUSTOM SCROLL END */
<button id="button-id" class="button">Change scrollbar color
                (current color: pink)</button>
                
                
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>

Solution

  • Have it check at the beginning and then every time clicked!

    const changeBtn = document.querySelector('.button');

        changeBtn.addEventListener('click', () => {
            document.body.classList.toggle('changed');
            changeBtn.classList.toggle("changed");
           check();
        });

function check(){
var changeBtnn = document.querySelector('.button');
if(changeBtnn.classList.contains("changed")){
changeBtnn.innerHTML = "Change scrollbar color (current color: white)";
} else{
changeBtnn.innerHTML = "Change scrollbar color (current color: pink)";
}
}
check();
    .button {
    background-color: #ffffff;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    color: black;
    font-size: 20px;
  }
  
  body {
  background-color: #000;
  color: white;
  }
  
  
    /* CUSTOM SCROLL START */
  body::-webkit-scrollbar {
    width: 1em;
  }
  body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
      background-color: rgb(131, 69, 69);
  }
  body::-webkit-scrollbar-thumb {
    background-color: rgb(185, 115, 115);
    outline: 1px solid slategrey;
  }

  body.changed::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(180, 88, 88, 0.473);
    background-color: rgb(131, 69, 69);
}

body.changed::-webkit-scrollbar-thumb {
  background-color: rgb(255, 255, 255);
  outline: 1px solid slategrey;
}
  /* CUSTOM SCROLL END */
    <button id="button-id" class="button"></button>
                
                
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<br>
<p>Something to scroll down</p>
<p>Something to scroll down</p>

    Try this!