当我第一次按下按钮时，它不会执行我的 JavaScript 直到我第二次按下它

Question

我有一个按钮可以改变滚动条的样式，我想让它显示滚动条当前设置的颜色，我已经让它与“innerHTML”切换，但它第一次没有激活我按下它，只是第二次。这使得它说它是粉红色的，但实际上是白色的。

这是我的问题的一个例子，只是运行代码并点击按钮，当它真的是粉红色时它会说它是白色等等。

        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>

Answer 1

一开始检查，然后每次点击！

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>

试试这个！

当我第一次按下按钮时，它不会执行我的 JavaScript 直到我第二次按下它

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

html

javascript

css

scrollbar

innerhtml