How to get Javascript object from HTML element
<p>I have 3 "dice" objects created from this custom constructor:</p>

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

<p>Then, inside <code>function rollOnce()</code>, I have 3 HTML buttons inside a <code>document.getElementById("paragraph1").innerHTML</code> command that will display each dice's value as follows:</p>

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

<p>Now, <code>function keepDice(diceId)</code> will set attribute <code>class="kept"</code> for each dice/button that has been clicked.</p>

<p><strong>The next thing I want to do is to know which dice variable (dice1, dice2, dice3) has been clicked (in order to keep their value by doing <code>diceN.keep = true;</code>.</strong> Because after that there will be another round of the game in which <em>only those dice which are "unkept" will get another <code>diceN.roll()</code> call</em>. But my knowledge is still very limited and I only know how to access (HTML only) elements by using <code>document.getElementsBy(...)</code> (this is the HTML DOM, right? I'm currently learning this at W3Schools).</p>

<p>I have not yet learned about jQuery, AngularJS and all the other cool webdev stuff. So if it is possible to answer using only Javascript it would be much appreciated (even if other libs would make it easier! It's a bonus if there are alternative solutions and I would be happy to learn too!). Is this possible at all?</p>

<p>Thanks in advance,</p>