javascript - 如何从 HTML 元素获取 Javascript 对象

Question

我从这个自定义构造函数创建了 3 个“骰子”对象:

function Dice() {
  this.value = 0;
  this.keep = false;
  this.roll = function() {
    this.value = Math.floor(Math.random()*6)+1;
  };
}

然后，在 function rollOnce() 中，我在 document.getElementById("paragraph1").innerHTML 命令中有 3 个 HTML 按钮，它们将每个骰子的值显示为如下:

function rollOnce() { 
    (...)
    document.getElementById("paragraph1").innerHTML = 
        '<button id="diceOne" class="unkept" onclick="keepDice(this.id)">'+dice1.value+'</button> ' +
        '<button id="diceTwo" class="unkept" onclick="keepDice(this.id)">'+dice2.value+'</button> ' +
        '<button id="diceThree" class="unkept" onclick="keepDice(this.id)">'+dice3.value+'</button> ';
}

现在，函数 keepDice(diceId) 将为每个被点击的骰子/按钮设置属性 class="kept"。

接下来我要做的是知道哪个骰子变量(dice1、dice2、dice3)被点击了(为了通过 diceN.keep = true; 保持它们的值) >. 因为在那之后还会有另一轮游戏，其中只有那些“未保存”的骰子会得到另一个 diceN.roll() 调用 . 但我的知识仍然非常有限，我只知道如何使用 document.getElementsBy(...) 访问(仅限 HTML)元素(这是 HTML DOM，对吧？我目前在 W3School 学习这个)。

我还没有了解 jQuery、AngularJS 和所有其他很酷的 webdev 东西。因此，如果可以仅使用 Javascript 来回答，我们将不胜感激(即使其他库会使它变得更容易!如果有其他解决方案，那将是一个奖励，我也很乐意学习!)。这可能吗？

提前致谢

Answer 1

可能类似于 class="kept-'+dice1.keet+'"onclick="keepDice(1)"

然后

function keepDice(index){
    dices[index].keep = true;
    turns--;
    if (turns > 0) {
        rollOnce()
    }
}