Привязать значение кости к динамическому HTML-коду JavaScript

Question

Итак, я делаю небольшую игру в кости в javascript / jquery. Я получаю некоторых пользователей (в данном случае игроков) из REST API, который я получаю с AJAX Вот так:

var APICaller = (function () {
    let endpoint = "https://jsonplaceholder.typicode.com/";

    function api_call(method, url, data, callback) {
        $.ajax({
            url: url,
            method: method,
            data: data,
            success: callback
        });
    }

    function get_users(callback) {
        let method = "GET";
        let url = endpoint + "users";
        let data = {};
        api_call(method, url, data, callback);
    }

    return {
        get_users: get_users, 
    };
})();

Человек, играющий в игру, может выбрать игрока из списка пользователей и затем нажать кнопку воспроизведения.

Когда нажата кнопка воспроизведения, игральные кости должны бросить 3 числа для каждого игрока и отобразить все числа на стороне каждого игрока. И затем список значений игральных костей должен измениться через некоторое время, и в этом списке должна быть только общая сумма из трех значений игральных костей, а также список пользователей должен быть в порядке пунктов с наибольшим общим количеством очков в верхней части.

Вот как я пытался сделать это:

var Game = (function (){

    //Function for when the dice rolls.
    function roll_dice(){
        var value1 = $(".val1");
        var value2 = $(".val2");
        var value3 = $(".val3");
        var v1 = Math.floor(Math.random() * 6) + 1;
        var v2 = Math.floor(Math.random() * 6) + 1;
        var v3 = Math.floor(Math.random() * 6) + 1;
        var dice_total = v1 + v2 + v3;
        value1.text = v1;
        value2.text = v2;
        value3.text = v3;
    }

    return{
        roll_dice: roll_dice
    };
})();

var EventHandlers = (function () {
    function init(){
        APICaller.get_users(on_get_users_success);

        function on_get_users_success(response) {
            //For each user in the API
            $.each(response, function (i, user) {
                $("#my-list").append('<li class="list-li"><a class="list-a">' + user.name + '</a></li>');
                //Create the divs and p tags 
                $("#dice_value").append('<div class="val_div"> <p class="val1"></p> <p class="val2"></p> <p class="val3"></p></div>');
            });
            //change information
            $("#info-txt").text("Välj en spelare!");
        }
        // On klick on a user make klicked user your own player.
        $("#my-list").on('click', '.list-a', function(){
            var currentPlayer = this.text;

            $("#info-txt").text("Tryck på spela knappen för att börja spelet!");
            $("#currentPlayer-div").animate({height: '300px', opacity: '1'});
            $("#currentPlayer-h3").text(currentPlayer);

        });
        // On klick of the play button
        $("#startGame-button").click(function (){

            $("#dice_value").animate({ opacity: '1'});
            $("#dice_value").ready('.val1', function(){
                text = v1;
            });
            $("#dice_value").ready('.val2', function(){
                text = v2;
            });
            $("#dice_value").ready('.val3', function(){
                text = v3;
            });
            Game.roll_dice();
        });


    }

    return {
        init: init,
    }

})();
$(document).ready(function(){
    EventHandlers.init();
});

У меня проблема в том, что значения 3 кубиков не отображаются, я думаю, это не связано с этим, потому что оно динамически добавляется.

 $("#dice_value").append('<div class="val_div"> <p class="val1"></p> <p class="val2"></p> <p class="val3"></p></div>');

Это код для того, что должно произойти, когда нажата кнопка запуска, и где я пытаюсь связать значения кубиков в тегах p:

// On klick of the play button
        $("#startGame-button").click(function (){

            $("#dice_value").animate({ opacity: '1'});
            $("#dice_value").ready('.val1', function(){
                text = v1;
            });
            $("#dice_value").ready('.val2', function(){
                text = v2;
            });
            $("#dice_value").ready('.val3', function(){
                text = v3;
            });
            Game.roll_dice();
        });

Это HTML-код:

<div id="top-div">
        <h1 id="title">The game</h1>
        <p id="info-txt"></p>
    </div>
    <div id="currentPlayer-div">
        <h1 id=playerHeader>Din spelare</h1>
        <h3 id="currentPlayer-h3"></h3>
        <button id="startGame-button">Spela</button>
    </div>
    <div id="main_gameDiv">
        <div id="dice_value"></div>
        <ul id="my-list"></ul>
    </div>

Надеюсь, это описывает достаточно того, с чем мне нужна помощь:)

Answer 1

У вас есть опечатка, вы пытаетесь использовать объект jQuery в чистом виде на JavaScript:

function roll_dice(){
  var value1 = $(".val1");
  var value2 = $(".val2");
  var value3 = $(".val3");
  var v1 = Math.floor(Math.random() * 6) + 1;
  var v2 = Math.floor(Math.random() * 6) + 1;
  var v3 = Math.floor(Math.random() * 6) + 1;
  var dice_total = v1 + v2 + v3;
  
  // value1, value2 & value3 are jQuery objects, not javascript DOM elements
  //value1.text = v1;
  //value2.text = v2;
  //value3.text = v3;
  value1.html(v1);
  value2.html(v2);
  value3.html(v3);
}