*EDITAR

Tengo una lista en mi HTML llamada "#wordlist". En esta lista tengo las palabras de mi juego, el audio adjunto y la imagen adjunta a cada palabra. Todo esto funciona bien.

Debido a que habrá diferentes versiones del juego, se me ha pedido que tome algunas de las variables que pueden cambiar la cantidad de palabras para completar, el tamaño de la cuadrícula, etc. y colocarlos como atributos de datos en la lista. (Haciendo todos los factores de edición disponibles en un solo lugar).

El problema es que no puedo entender cómo voy a escribir un valor para algo como "entrada de número" a continuación y cambiar la variable "entrada de número" en el script.

¿Es posible hacerlo?

Aquí está la lista (datos-palabra, datos-audio y datos-imágenes están todos bien)

<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>

Aquí están las variables que necesito cambiar a través de los atributos de datos en el HTML

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

Así que básicamente así que si"data-number-input="2" esto haría que la variable"numberInput = 2;" en el guion