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

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

接下来我要做的就是知道点击了哪个骰子变量（dice1，dice2，dice3）（为了通过diceN.keep = true;来保持它们的价值。因为之后将会有另一轮游戏，只有那些“不知情”的骰子才能获得另一个diceN.roll()电话。但我的知识仍然非常有限，我只知道如何访问（仅限HTML）元素使用document.getElementsBy(...)（这是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

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

以下示例包括我收集的内容是您当前的初始化 - 定义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();

我已将ID传递给Dice.keep(id)，只是为了更新DOM元素，代表此Object变量。

由于您是初学者，因此对类名进行了一些澄清：我使用三元逻辑运算符快速执行IF THEN ELSE

所以说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 4

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

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

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

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

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

因此，当HTML已加载并且文档准备就绪时，我初始化Object，将其存储在var中，并且Object具有内置的所有必需功能来管理它button。 / p>

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

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

如何从HTML元素

4 个答案: