Почему мой код Javascript возвращает объект object?

Я новичок в jquerry. Я пытался получить/просуммировать некоторые элементы из моих представлений django в jquerry. вот что у меня получилось

$(document).ready(function()
{
    var sch = $('#sch-books');
    var gov = $('#gov-books');
    var total = sch.val() + gov.val();
    $('#total').text("Total : " + total); 

});

В моем шаблоне есть такие

<div id="sch-books" class="h6 mb-1">School copies - <b>{{ s_books.count }}</b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b>{{ g_books.count }}</b></div>
<div id="total"></div>

Выводит Total : Может кто-нибудь помочь мне разобраться.

вы можете попробовать использовать django-mathfilter для этой цели, потому что javascript может быть отключен пользователем, а django-mathfilter настолько мощный.

$ pip install django-mathfilters

Then add mathfilters to your INSTALLED_APPS.

тогда в шаблоне вы можете просто сделать что-то вроде этого.

{% load mathfilters %}
........
{% with s_books.count as s_book and g_books.count as g_book %} 
<div id="sch-books" class="h6 mb-1">School copies - <b>{{ s_book }}</b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b>{{ g_book }}</b></div>
<div id="total">{{ s_book|add:g_book }}</div>
{% endwith %}

для получения дополнительной информации читайте здесь https://pypi.org/project/django-mathfilters/

Предисловие: Я бы предложил вам сделать это в шаблоне, сейчас есть два ответа, показывающие как это сделать (здесь и здесь). (Я не работаю с Django.) Имейте в виду, что выполнение этого действия в коде на стороне клиента приведет к тому, что <div id="total"></div> будет отображаться пустым очень недолго, а затем заполнится числом. Если этот элемент находится в поле зрения при загрузке страницы, пользователи увидят это мерцание - даже если они не смогут увидеть, что именно мерцает (что может раздражать). Избежать этого, сделав это в представлении Django, вероятно, будет лучше.

Но что касается вашего кода на стороне клиента:

У элементов

div нет value, у них есть textContent и innerHTML (подробности см. в ответах на этот вопрос). Но содержимое этих элементов div будет содержать множество других элементов, кроме искомых чисел. Хотя вы можете выделить число из текста (или получить его только из элемента b внутри div), оба эти решения хрупки и сломаются, если кто-то изменит шаблон, казалось бы, невинными способами.

Если вы действительно хотите обрабатывать это с помощью кода на стороне клиента, храните нужные вам значения в атрибутах data-* на элементах div:

<div id="sch-books" class="h6 mb-1" data-count="{{ s_books.count }}">School copies - <b>{{ s_books.count }}</b></div>
<div id="gov-books" class="h6 mb-1" data-count="{{ g_books.count }}">Govt copies - <b>{{ g_books.count }}</b></div>
<div id="total"></div>

Затем возьмите этот атрибут data-*: 

$(document).ready(function() {
    const sch = +$("#sch-books").attr("data-count");
    const gov = +$("#gov-books").attr("data-count");
    const total = sch + gov;
    $("#total").text(`Total : ${total}`); 
});

Вместо привлечения js скрипта, я порекомендую создать total_value на стороне Django и перенести его в шаблон.

<div class="h6 mb-1" data-count="{{ s_books.count }}">School copies - <b>{{ s_books.count }}</b></div>
<div class="h6 mb-1" data-count="{{ g_books.count }}">Govt copies - <b>{{ g_books.count }}</b></div>
<div>{total_count}</div>

Я не уверен, каким способом вы следуете для рендеринга шаблона, но должен посмотреть на этот

# views.py
from django.shortcuts import render

def render_users(request):
    g_books = {}
    s_books = {}

    context = {
        "g_books": g_books,
        "s_books": s_books,
        "total_count": g_books.count + s_books.count
    }

    return render(request, 'books.html', context)

val() возвращает атрибут value, как в <input type="text" value=something/>, а html() возвращает содержимое (innerHTML) выбранного элемента.

Так что измените свои коды следующим образом, и все будет в порядке. (Я предполагаю, что django возвращает числовое значение в {{ s_books.count }} и {{ g_books.count }}).

$(document).ready(function()
{
    var sch = $('#sch-books b').html(); // added b element  and calling html()
    var gov = $('#gov-books b').html(); // added b element  and calling html()
    
    var total = parseInt(sch) + parseInt(gov); // converted the string into number using parseInt()

    $('#total').text("Total : " + total); // worked

});
Вернуться на верх