如何从HTML元素中获取Javascript对象

我使用此自定义构造函数创建了3个“骰子”对象：

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

然后，在

函数rollOnce（）

中，我在

document.getElementById（“段落1”）.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> ';
}

函数rollOnce（）{
(...)
document.getElementById（“段落1”）.innerHTML=
''+骰子1.值+''+
''+骰子2.值+''+
''+骰子3.值+''；
}

现在，

函数keepDice（diceId）

将为单击的每个骰子/按钮设置属性

class=“keep”

我想做的下一件事是知道单击了哪个骰子变量（dice1、dice2、dice3）（通过执行

diceN.keep=true；

来保持它们的值，因为在这之后将有另一轮游戏，其中只有那些“未接受”的骰子将获得另一个

diceN.roll（）

call。但我的知识仍然非常有限，我只知道如何使用

document.getElementsBy（…）

访问（仅HTML）元素（这是HTML DOM，对吗？我目前正在W3S学校学习）

我还没有学习过jQuery、AngularJS和所有其他很酷的webdev工具。因此，如果能够只使用Javascript来回答问题，我会非常感激（即使其他LIB会让它变得更简单！如果有其他解决方案，这是一个额外的好处，我也很乐意学习！）。这有可能吗

---

提前感谢，

可能类似于

class=“keep-”+dice1.keet+”“onclick=“keepDice（1）”

然后

试试这个：

function keepDice(id) {
  var whichDice;

  switch(id) {
    case 'diceOne':
      whichDice = dice1;
      break;
    case 'diceTwo':
      whichDice = dice2;
      break;
   case 'diceThree':
      whichDice = dice3;
      break;
  }

  whichDice.keep = true;
}

---

如果您将骰子存储在如下关联数组中：

dice['diceOne'] = new Dice();
dice['diceTwo'] = new Dice();
dice['diceThree'] = new Dice();

创建按钮的方法几乎相同

<button id="diceOne" class="unkept" onclick="keepDice(this.id)">dice["diceOne"].value</button>

---

您需要跟踪保留的内容和未保留的内容。保留dice类中的所有dice功能将非常有用。每次运行

rollOnce（）

时，您还必须在

类名中表示保留/未保留状态

下面是一个示例，我收集到的是您当前的初始化-定义
var dice
然后定义
rollOnce（）
然后运行
rollOnce（）


编辑：这里有一个稍微修改的版本，其中Dice（）对象对DOM是不可知的，但仍然提供所有相关数据：
我再次谈到这个问题，并意识到有一个更好的方法。这与您目前得到的方法完全不同，但让我解释一下

我知道你的问题标题是“如何从HTML元素获取Javascript对象”，但我的回答更好地服务于“如何从Javascript对象获取HTML元素”的问题，也更好地解决了你面临的问题

首先，我通过创建一个容器元素
#paragraph1
和一个运行
rollOnce（）函数的“Roll Once”按钮来设置阶段

<p id="paragraph1"></p>
<button onclick="rollOnce()">Roll Once</button>

完整的工作演示如下：

编辑：如果您想稍后获取骰子的值，可以访问对象的属性，如：
dice1.button.innerHTML

function keepDice(id)
{
    dice[id].keep = true;
    document.GetElementById(id).setAttribute("class","kept");
    //...
}

function Dice() {
  this.value = 0;
  this.kept = false;
  this.roll = function() {
    if(!this.kept) this.value = Math.floor(Math.random()*6)+1;
  };
  this.keep = function(id) {
    this.kept = true;
    document.getElementById(id).className = 'kept';
  }
}

var dice1 = new Dice();
var dice2 = new Dice();
var dice3 = new Dice();

function rollOnce() { 
  dice1.roll();
  dice2.roll();
  dice3.roll();
    document.getElementById("paragraph1").innerHTML = 
        '<button id="diceOne" class="'+(dice1.kept?'kept':'keep')+'" onclick="dice1.keep(\'diceOne\')">'+dice1.value+'</button> ' +
        '<button id="diceTwo" class="'+(dice2.kept?'kept':'keep')+'" onclick="dice2.keep(\'diceTwo\')">'+dice2.value+'</button> ' +
        '<button id="diceThree" class="'+(dice3.kept?'kept':'keep')+'" onclick="dice3.keep(\'diceThree\')">'+dice3.value+'</button> ';
}
rollOnce();

  this.keep = function(button) {
    this.kept = true;
    button.className = 'kept';
  }

<p id="paragraph1"></p>
<button onclick="rollOnce()">Roll Once</button>

function Dice(container) {
  this.button = document.createElement("button");
  this.button.innerHTML = 0;
  document.getElementById(container).appendChild(this.button);
  this.button.addEventListener('click', function() {
    this.className = 'kept';
  });
  this.roll = function() {
    if(this.button.className != 'kept') {
      this.button.innerHTML = Math.floor(Math.random()*6)+1;
    }
  }
}
var dice1;
var dice2;
var dice3;
document.onreadystatechange = function () {
  if(document.readyState == "complete") {
    dice1 = new Dice("paragraph1");
    dice2 = new Dice("paragraph1");
    dice3 = new Dice("paragraph1");
    rollOnce();
  }
}
function rollOnce() { 
  dice1.roll();
  dice2.roll();
  dice3.roll();
}