单击“随机数”并更改颜色？

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>

我想创建一个按钮，随机数字，按钮颜色如下引导CSS类：

1=主要，2=次要，3=成功，4=危险，5=警告，6=信息（背景颜色）在屏幕或刷新的开始，您必须始终随机化一个数字，并为按钮分配颜色和值。点击按钮就是总是随机化一个新数字，并改变它的颜色和值。

Answer 1

下面是一个自举的解决方案。您可以在css中创建自己的btn-...类，然后使用它们。这样你就不需要引导，可以摆脱链接标签。例如：. btn-危险{背景颜色：红色}

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

如果您只想更改当前按钮，请尝试以下操作

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>

Answer 3

这是你想要的例子，它会在加载时分配一个随机类，然后它会随着每次点击而改变。它不使用你的方法，但它的工作是预期的。

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>