click random number and change colors?

Question

class diceButton {
  constructor(colsElement) {
    this.containerElement = colsElement;
    this.dice = document.createElement('button');
    this.dice.type = 'button';
    this.dice.className = 'btn btn-lg';
  }
  setDiceStyle() {
    let n = 1;
  }
  randomNumber() {
    return Math.floor(Math.random() * 6) + 1;
  }
  onChangeState() {}
}

button {
  margin-top: 100px;
  width: 250px;
  height: 250px;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="cols" id="casino">
      <button type="button" id='randomBTN'>Click Me!</button>
    </div>
  </div>
</div>

I want to create a button that Random numbers, with the button color following the Bootstrap CSS class like this:

1 = primary, 2 = secondary, 3 = success, 4 = danger, 5 = warning, 6 = info (background color) At the beginning of the screen or refresh, you must always randomize a number and assign a color and value to the button. Clicking on a button is to always randomize a new number and change its colors and values.

Answer 1

The following is a solution with bootstrap. You can create your own btn-... classes in your css and just use them. This way you will not need bootstrap and can get rid of the link tag. eg.: .btn-danger { background-color: red }

class diceButton {
  constructor(colsElement) {
    this.classes = ["primary", "secondary", "success", "danger", "warning", "info"]
    this.containerElement = colsElement;
    this.dice = this.create();
    var that = this;
    this.dice.addEventListener("click", function() {
      that.setDiceStyle.apply(that, []);
    })
    this.dice.type = 'button';
    this.dice.className = 'btn btn-lg';
    this.setDiceStyle()
  }
  create() {
    let e = document.createElement("button");
    e.setAttribute("type", "button");
    e.innerText = "Click Me!";
    this.containerElement.appendChild(e);
    return e;
  }
  setDiceStyle() {
    let n = this.randomNumber();
    this.dice.setAttribute("class", "btn btn-" + this.classes[n]);
  }
  randomNumber() {
    return Math.floor(Math.random() * 6);
  }
}

var d = new diceButton(document.getElementById("casino"));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container">
  <div class="row justify-content-center">
    <div class="cols" id="casino">
    </div>
  </div>
</div>

Answer 2

here is the example for what you want, It will assign a random class on load, and then it will change with every click. it doesnt use your approch but its working as expected.

var classArray = ['btn-primary','btn-secondary','btn-success','btn-danger','btn-warning','btn-info'];
  var randomNumber = Math.floor(Math.random() * classArray.length);
  var btn = document.getElementById('randomBTN');
  btn.classList.add(classArray[randomNumber]);

  btn.onclick = function(){
    var randomNumber2 = Math.floor(Math.random() * classArray.length);
    this.classList.forEach(className => {
        if (className.startsWith('btn-')) {
            this.classList.remove(className);
        }
    });
    btn.classList.add(classArray[randomNumber2]);
    
    btn.innerHTML = "<h5>" + classArray[randomNumber2] + "<br><br>" + randomNumber2 + "</h5>"
}

button {
  margin-top: 10px;
  width: 250px;
  height: 250px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center">
    <div class="cols" id="casino">
      <button type="button" id='randomBTN' class="btn">Click Me!</button>
    </div>
  </div>
</div>

Answer 3

If you just want to change the current button then try this

const bsColors = ["btn-primary","btn-secondary","btn-success","btn-danger","btn-warning","btn-info"];
const randomNumber = len => { return Math.floor(Math.random() * len) };


class diceButton {
  constructor(colsElement) {
    this.containerElement = colsElement;
    this.dice = document.createElement('button');
    this.dice.id = 'randomBTN';
    this.dice.type = 'button';
    const type = bsColors[randomNumber(bsColors.length)]; // or fill out setDiceStyle
    this.dice.className = 'btn btn-lg '+type;
    this.dice.innerText = type;
    this.dice.addEventListener("click",this.onChangeState)
    this.containerElement.appendChild(this.dice);
  }
  setDiceStyle() {
    let n = 1;
  }
  onChangeState() { 
    // console.log(this.innerText) 
    this.classList.forEach(clas => {
      if (clas.startsWith('btn-')) { 
        this.classList.remove(clas);
        const newType = bsColors[randomNumber(bsColors.length)]
        this.classList.add(newType);
        this.innerText = newType;
      }
    })  
  }
}
const container = document.getElementById("casino");
const btn = new diceButton(container);

button {
  margin-top: 100px;
  width: 250px;
  height: 250px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="container">
  <div class="row justify-content-center">
    <div class="cols" id="casino"></div>
  </div>
</div>

If you want to create new buttons, then you will need to add code if you do not want to have duplicate types of buttons - this code will create the same type of button more than once

const bsColors = ["btn-primary","btn-secondary","btn-success","btn-danger","btn-warning","btn-info"];
const randomNumber = len => { return Math.floor(Math.random() * len) };
class diceButton {
  constructor(colsElement) {
    this.containerElement = colsElement;
    this.dice = document.createElement('button');
    this.dice.type = 'button';
    const type = bsColors[randomNumber(bsColors.length)]
    this.dice.className = 'btn btn-lg '+type;
    this.dice.innerText = type;
    this.dice.addEventListener("click",this.onChangeState)
    this.containerElement.appendChild(this.dice);
  }
  setDiceStyle() {
    let n = 1;
  }
  onChangeState() { console.log(this.innerText) }
}
const container = document.getElementById("casino");
document.getElementById("randomBTN").addEventListener("click",function() {
  const btn = new diceButton(container);
})

button {
  margin-top: 100px;
  width: 250px;
  height: 250px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

<div class="container">
  <div class="row justify-content-center">
    <div class="cols" id="casino">
      <button type="button" id='randomBTN'>Click Me!</button>
    </div>
  </div>
</div>