如何从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()命令将显示每个骰子的值，如下所示：

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> ';
}

现在， function keepDice(diceId)将为已单击的每个骰子/按钮设置属性class="kept" 。

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

我还没有学过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()
    }
}

Answer 2

尝试这个：

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;
}

Answer 3

如果你将骰子存储在一个关联数组中，如下所示：

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>

你可以像这样写你的骰子功能

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

Answer 4

您需要跟踪已保留的内容和未保留的内容。 将所有骰子功能保存在骰子类中会很有用。 每次运行rollOnce()还必须表示className的keep / unkept状态。

这是一个例子，包括我收集的是你当前的初始化 - 定义var dice然后定义rollOnce()然后运行rollOnce()

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();

我已经将它传递给Dice.keep(id)只是为了获得表示此Object变量的DOM元素的实时更新。

自从你是初学者以来对类名的一些澄清：我使用三元逻辑运算符来快速执行IF THEN ELSE

所以说dice1.kept?'kept':'keep'的部分dice1.kept?'kept':'keep'

实际上意味着IF dice1.kept THEN 'kept' ELSE 'keep'

如果你愿意，你可以把一个空白''代替'keep' ，因为我认为它没有被使用（但你可能会将它用于CSS）。 当然，这段代码还有很大的改进空间，但我希望尽可能地保持它与您的示例代码类似。 事实上，我要做的第一件事可能是将onclick更改为： onclick="dice1.keep(this)"然后更改您的对象，如：

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

http://codepen.io/anon/pen/MyrxyX

编辑：这是一个稍微修改过的版本，其中Dice（）对象与DOM无关，但仍提供所有相关数据： http ： //codepen.io/anon/pen/MyrxbB

Answer 5

我再次回到这里，意识到有更好的方法。 这是一个与你到目前为止完全不同的方法，但让我解释一下......

我知道你的问题标题是“如何从HTML元素中获取Javascript对象”但我的答案更好地提供了“如何从Javascript对象获取HTML元素”的问题，并且更好地解决了您所面临的问题。

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

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

然后我创建了一个带有参数的Dice()对象 - 这个参数是我们希望用作容器的元素的id。 我们必须等待HTML加载才能找到容器，因为在那之前它还不存在。 这就是我将一个函数绑定到document.onreadystatechange事件的原因。

因此，当HTML已加载并且文档准备就绪时，我初始化Object，将其存储在var ，并且Object具有内置的所有必需功能来管理它的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();
}

完整的工作演示在这里： http ： //codepen.io/anon/pen/groEmg

编辑：如果您想稍后获取骰子的值，可以像下面这样访问Objects的属性： dice1.button.innerHTML