Javascript "classList"を使用してボタンクラスonclickを変更する

Question

いずれかのボタンをクリックすると2つのボタンの外観を変更したいと思います。しかし、私はそうすることはできません。

新しいボタンがクリックされるたびにボタンのクラスを変更したいが、このコードでは何も起こっていない。何が問題なの？

function offbutton() { 
    var offbtn = document.getElementById("btndisable3"); 
    var onbtn = document.getElementById("btnenable3"); 

    offbtn.classList.remove("btn btn-default"); 
    offbtn.classList.add("btn btn-danger active"); 
    onbtn.classList.remove("btn btn-success active"); 
    onbtn.classList.add("btn btn-default"); 
} 

function onbutton() { 
    var offbtn = document.getElementById("btndisable3"); 
    var onbtn = document.getElementById("btnenable3"); 

    onbtn.classList.remove("btn btn-default"); 
    onbtn.classList.add("btn btn-success active"); 
    offbtn.classList.remove("btn btn-danger active"); 
    offbtn.classList.add("btn btn-default"); 
} 

<div class="form-group"> 
    <label class="col-sm-2 control-label"> 
    <?=$ name ?> 
    </label> 
    <div class="col-sm-10"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label id="btndisable<?= $id ?>" class="btn <?php if($value == 0){ echo 'btn-danger active'; } else{ echo 'btn-default'; } ?>" onclick="offbutton();"> 
     <div class="col-sm-2"> 
      <input type="radio" name="options<?= $id ?>" id="disable<?= $id ?>" value="0" <?php if($value==0){ echo 'checked'; } ?>> O 
     </div> 
     </label> 
     <label id="btnenable<?= $id ?>" class="btn <?php if($value == 1){ echo 'btn-success active'; } else{ echo 'btn-default'; } ?>" onclick="onbutton();"> 
     <div class="col-sm-2"> 
      <input type="radio" name="options<?= $id ?>" id="enable<?= $id ?>" value="1" <?php if($value=='1'){ echo 'checked'; } ?>> I 
     </div> 
     </label> 
    </div> 
    </div> 
</div> 

Answer 1

あなたのコードがあるべきように、削除/いくつかのクラスを追加したい場合は、コンマ,、セパレータを使用する必要があります。

function offbutton() { 
    var offbtn = document.getElementById("btndisable3"); 
    var onbtn = document.getElementById("btnenable3"); 

    offbtn.classList.remove("btn","btn-default"); 
    offbtn.classList.add("btn","btn-danger","active"); 
    onbtn.classList.remove("btn","btn-success","active"); 
    onbtn.classList.add("btn","btn-default"); 
} 

function onbutton() { 
    var offbtn = document.getElementById("btndisable3"); 
    var onbtn = document.getElementById("btnenable3"); 

    onbtn.classList.remove("btn","btn-default"); 
    onbtn.classList.add("btn","btn-success","active"); 
    offbtn.classList.remove("btn","btn-danger","active"); 
    offbtn.classList.add("btn","btn-default"); 
} 

・ホープ、このことができます。