当我第一次按下一个按钮时，它不会做我的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>

试试这个