Wie Javascript-Objekt aus HTML-Elemente

Question

Ich habe 3 „Würfel“ Objekte aus diesem benutzerdefinierten Konstruktor erstellt bekommen:

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

Dann innen function rollOnce(), ich habe 3 HTML-Schaltflächen in einem document.getElementById("paragraph1").innerHTML Befehl, dass jeder Würfel der anzeigt Wert wie folgt:

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

Nun function keepDice(diceId) Attribut class="kept" für jeden Würfel/Taste eingestellt werden, die angeklickt wurde.

Das nächste, was ich tun möchte, ist die Würfelgröße (dice1, dice2, dice3) angeklickt wurde (kennen, um ihren Wert zu halten, indem diceN.keep = true; tun. Denn nach, dass es eine weitere Runde der wird Spiel, in dem nur die Würfel, die "unbeachtet" sind, erhalten einen anderen diceN.roll() Anruf. Aber mein Wissen ist immer noch sehr begrenzt und ich kann nur (HTML) nur Elemente mit Hilfe von document.getElementsBy(...) (das ist das HTML DOM, oder? Ich lerne gerade das bei W3Schools).

Ich habe noch nicht über jQuery, AngularJS und all die anderen coolen Webdev Zeug gelernt. Also, wenn es möglich ist Antwort nur mit Javascript würde es sehr geschätzt werden (auch wenn andere libs es einfacher machen würde!) Es ist ein Bonus, wenn es alternative Lösungen gibt und ich würde auch gerne lernen!). Ist das überhaupt möglich?

Vielen Dank im Voraus,

Answer 1

Ich kam wieder darauf zurück und erkannte, dass es einen besseren Weg gibt. Es ist ein ganz anderer Ansatz als das, was Sie bisher haben, aber lassen Sie mich erklären ...

Ich weiß, Ihre Frage Titel ist "Wie bekomme Javascript Objekt aus HTML-Element" aber meine Antwort dient besser die Frage "Wie HTML-Element von Javascript-Objekt zu bekommen" und auch besser löst das Problem, das Sie konfrontiert sind.

Zuerst habe ich die Bühne durch ein Containerelement #paragraph1 Schaffung und Erhaltung einer „Roll Once“ Taste, die läuft die rollOnce() Funktion

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

Dann erstelle ich das Dice() Objekt, die einen Parameter hat - dieser Parameter ist die ID des Elements, das wir als Container verwenden möchten. Wir müssen warten, bis der HTML-Code geladen ist, bevor wir diesen Container finden können, weil er bis dahin noch nicht existiert. Deshalb habe ich eine Funktion an das Ereignis document.onreadystatechange gebunden.

So, wenn der HTML geladen hat und das Dokument bereit ist, initialisiere ich das Objekt, speichern Sie es in einer var und das Objekt verfügt über alle erforderlichen Funktionen zum Verwalten von es ist button integriert.

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

Vollarbeits Demonstration ist hier: http://codepen.io/anon/pen/groEmg

Edit: Wenn Sie die Werte der Würfel später erhalten möchten, können Sie die Eigenschaften Objekte zugreifen wie so: dice1.button.innerHTML

Answer 2

Vielleicht so etwas wie class="kept-'+dice1.keet+'" onclick="keepDice(1)"

dann

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

Answer 3

Try this:

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 4

Wenn Sie Ihre Würfel in einem assoziativen Array wie folgt gespeichert:

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

Sie würden die Tasten fast die gleiche Art und Weise erstellen

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

Sie dann Ihre Würfel Funktion wie dieses

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

Answer 5

Sie müssen schreiben könnte, um verfolgen, was gehalten wurde und was hat nicht gehalten. Es wäre nützlich, alle Würfelfunktionen innerhalb der Würfelklasse zu halten. Jedes Mal, wenn Sie ausführen, müssen Sie auch den Status beibehalten/nicht gespeichert in der className darstellen.

Hier ist ein Beispiel einschließlich dessen, was ich Ihrer aktuellen Initialisierung sammeln wird - definieren var dice dann rollOnce() definieren dann laufen 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(); 

ich gemacht habe es eine ID Dice.keep(id) passieren nur ein Live-Update des DOM haben Element, das diese Objektvariable darstellt.

Einige Erläuterungen zu den Klassennamen, da Sie ein Anfänger sind: Ich habe ternären logischen Operatoren schnell einen IF THEN ELSE

auszuführen, so der Teil, der dice1.kept?'kept':'keep'

Eigentlich bedeutet IF dice1.kept THEN 'kept' ELSE 'keep'

Sie setzen können, sagt eine leere '' anstelle von 'keep' wenn Sie mögen, da ich glaube nicht, dass es verwendet wird (aber Sie könnten es für CSS verwenden). Natürlich gibt es in diesem Code viel Platz für Verbesserungen, aber ich wollte es so ähnlich wie möglich bei Ihrem Beispielcode behalten. onclick="dice1.keep(this)" und dann Objekt wie ändern: In der Tat ist das erste, was ich tun würde, wahrscheinlich die onclick Um dies ändern

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

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

Edit: hier ist eine leicht modifizierte Version, wo die Würfel() Objekt ist agnostisch zum DOM und liefert trotzdem alle relevanten Daten: http://codepen.io/anon/pen/MyrxbB