将按钮绑定到 Dice 类

问：

我正在尝试创建一类与D&D完全相同的骰子组，这样一来，按下按钮，我就可以掷出骰子并将其记录到控制台。我以为这将是一件非常简单的事情，但我肯定缺少一些东西。这是我目前所拥有的。

class Dice {
  constructor (sides) {
  this.sides = sides;
  }
  roll () {
    console.log(Math.floor(Math.random() * this.sides) + 1);
}}
const d4 = new Dice (4);
const d6 = new Dice (6);
const d8 = new Dice (8);
const d10 = new Dice (10);
const d12 = new Dice (12);
const d20 = new Dice (20);
const d100 = new Dice (100);

const btn = document.getElementById('button');
btn.onclick = d20.roll;

我目前得到“NaN”，我想我理解它“this”指的是按钮按下，而不是 d20 对象，因此“sides”属性是未定义的，给了我一个未定义的答案。我想也许我必须把“这个”与班级联系起来，做类似的事情

btn.onclick = d20.roll.bind(this);

但我仍然得到 NaN......我不确定此时发生了什么。