Как обновить динамически созданный номер с помощью функции успеха AJAX?

Question

Я создаю систему голосования с монго-бэкэндом и пытаюсь выяснить, как обновить номер в интерфейсе после проведения голосования.Прямо сейчас номер отображается динамически с рулями.При нажатии .up ajax делает свое дело и отправляет данные на сервер, затем возвращает gameData.По сути, я хочу, чтобы мой номер {{currentvote}} обновлялся в случае успеха.

$('.up').on('click', function() {
    var id = this.id;

    $.ajax({
        type: "POST",
        url: "/api/upvote",
        data: JSON.stringify({ cardId: id }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(gameData){
            console.log(gameData.currentvote + 1);

        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

<div class="col-lg-12">
    <div class="row">
    <div class="up" id="{{ID}}"><i class="fas fa-chevron-circle-up color-gray upvote"></i></div>
    <div class="down" id="{{ID}}"><i class="fas fa-chevron-circle-down color-gray downvote"></i></div>
    <div class="margin-left"><p class="vote-number" id="green">{{currentvote}}</p></div>
    </div>
</div>

Answer 1

Поскольку вы делаете это в jquery ajax, вы должны сделать это и в jquery.Вы можете легко сделать это следующим образом:

success: function(gameData){
    var currentVote = $(".vote-number").text();
    $(".vote-number").text( parseInt(currentVote) + parseInt(gameData.currentvote) + 1 );
}

Answer 2

Простой старый JS должен делать эту работу.

$('.up').on('click', function() {
var id = this.id;
var upVote = document.getElementById('green');
$.ajax({
       type: "POST",
       url: "/api/upvote",
       data: JSON.stringify({ cardId: id }),
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(gameData){
            console.log(gameData.currentvote + 1);
            upVote.innerText= parseInt(upVote.innerText) + 1;


        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

РЕДАКТИРОВАТЬ: Обновлено, чтобы учесть комментарий Брэда.