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

How to get Javascript object from HTML element

本文关键字：获取 Javascript 对象 元素 HTML      更新时间：2024-03-15

我有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(...)（这是HTMLDOM，对吧？我目前正在W3Schools学习）。

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

提前感谢，

也许类似class="kept-'+dice1.keet+'" onclick="keepDice(1)"

然后

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

试试这个：

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>

然后你可以写你的骰子函数像这个

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

我再次谈到这一点，并意识到有更好的方法。这是一种与迄今为止完全不同的方法，但让我解释一下。。。

我知道你的问题标题是"如何从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

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

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

这里有一个例子，包括我收集到的您当前的初始化-定义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)传递一个ID，只是为了实时更新表示该Object变量的DOM元素。

由于您是初学者，所以对类名进行了一些澄清：我使用了三元逻辑运算符来快速执行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

相关文章：