html - 如何更改事件切换的书写颜色

Question

我有一个切换按钮，可以根据您选择的内容从左向右移动，如果这是您选择的事件切换选项，我想将按钮内文本的颜色更改为白色，因此如果您切换里面的文本变为白色，但是我不确定如何实现这一点，任何帮助将不胜感激，谢谢

<div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
            <button type="button"  class="toggle-btn" onclick="login()">Sign in</button>
            <button type="button" class="toggle-btn" onclick="register()">Register</button>
        </div>



.form-box {
    width: 380px;
    height: 660px;
    position: relative;
    margin: 20% auto;
    padding: 5px;
    overflow: hidden;
    bottom: 150px;
}

.button-box {
    width: 220px;
    left: 100px;
    top: 50px;
    position: relative;
    display: flex;
    box-shadow: 0 0 10px 3px #ff61241f;
    border-radius: 30px;
    
}

.toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}


#btn {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    width: 110px;
    height: 100%;
    background-color: #fd886b;
    border-radius: 30px;
    transition: .5s;
}

Answer 1

我已经删除了 login() 和 register() 函数，因为它们对这个问题没有任何作用。也只有文本颜色改变，而不是背景颜色，因为它没有被问到，但想法是相似的。

function fun(x) {
    if(x===1)
  {
    document.getElementById("b1").style.color="white";
    document.getElementById("b2").style.color="black";
  }
  else
  {
    document.getElementById("b2").style.color="white";
    document.getElementById("b1").style.color="black";
  }
}

.form-box {
    width: 380px;
    height: 660px;
    position: relative;
    margin: 20% auto;
    padding: 5px;
    overflow: hidden;
    bottom: 150px;
}

.button-box {
    width: 220px;
    left: 100px;
    top: 50px;
    position: relative;
    display: flex;
    box-shadow: 0 0 10px 3px #ff61241f;
    border-radius: 30px;
    
}

.toggle-btn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}


#btn {
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    width: 110px;
    height: 100%;
    background-color: #fd886b;
    border-radius: 30px;
    transition: .5s;
}

<div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
            <button id="b1" type="button"  class="toggle-btn" onclick="fun(1)" style="color: white">Sign in</button>
            <button id="b2" type="button" class="toggle-btn" onclick="fun(2)">Register</button>
        </div>
</div>