Javascript change a button class onclick using "classList" [duplicate]

Question

I want to change the appearance of two buttons when either one of them is clicked. But I cannot seem to do that.

I want the classes of the buttons to be changed every time a new button is clicked, but nothing is happening with this code. What could be the problem?

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>

next time read the console Error: { "message": "Uncaught InvalidCharacterError: Failed to execute 'remove' on 'DOMTokenList': The token provided ('btn btn-default') contains HTML space characters, which are not valid in tokens."... } — mplungjan
– mplungjan, Commented Jun 16, 2016 at 14:19

Zakaria Acharki · Accepted Answer · 2016-06-16 14:18:53Z

4

You have to use comma , separator if you want to add/remove several classes so your code should be :

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");
}

Hope this helps.

edited Jun 16, 2016 at 14:18

answered Jun 16, 2016 at 14:11

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript change a button class onclick using "classList" [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related