Übernahme variabler Werte aus HTML-Datenattributen

*BEARBEITEN

Ich habe eine Liste in meinem HTML mit dem Namen "#wordlist". In dieser Liste halte ich die Wörter in meinem Spiel, das angehängte Audio und das angehängte Bild zu jedem Wort. Das alles funktioniert gut.

Da es verschiedene Versionen des Spiels geben wird, wurde ich gebeten, einige der Variablen zu verwenden, mit denen sich die Anzahl der zu vervollständigenden Wörter, die Größe des Gitters usw. ändern lässt. und platziere sie als Datenattribute in der Liste. (Alle Bearbeitungsfaktoren an einem Ort verfügbar machen).

Das Problem ist, dass ich nicht verstehen kann, wie ich einen Wert für etwas wie "Zahleneingabe" unten und das Ändern der Variablen "Zahleneingabe" im Skript eingeben werde.

Ist das möglich zu tun?

Hier ist die Liste (Datenwort, Datenaudio und Datenbild sind in Ordnung)

<ul id="wordlist">
        <li data-audio="" data-pic="images/one.png" data-word="one" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/two.png" data-word="two" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/three.png" data-word="three" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/four.png" data-word="four" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/five.png" data-word="five" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/six.png" data-word="six" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/seven.png" data-word="seven" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/eight.png" data-word="eight" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/nine.png" data-word="nine" data-number-input="" data-completion-number"" data-grid=""></li>
        <li data-audio="" data-pic="images/ten.png" data-word="ten" data-number-input="" data-completion-number"" data-grid=""></li>
</ul>

Hier sind die Variablen, die ich über die Datenattribute im HTML ändern muss

var numberInput = 2;
var completionNumber = 2;
var smallGrid = {
    x: 4,
    y: 4
};
var largeGrid = {
    x: 8,
    y: 6
};

Also im Grunde also wenn"data-number-input="2" das würde die Variable machen"numberInput = 2;" im Drehbuch

Antworten auf die Frage(2)

Ihre Antwort auf die Frage