为什么我的 Javascript 代码返回 object object？

Question

I am new to jquerry. I tried getting/summing some items from my django views in jquerry. this is whhat I have

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

});

My template has these

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

It displays Total: May someone help me get it right..

Answer 1

you can try to use django-mathfilter for this purpose.because javascript can be disabled by the user and django-mathfilter is so powerfull.

$ pip install django-mathfilters

Then add mathfilters to your INSTALLED_APPS.

then in you template you can just do something like this.

{% 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 %}

for more information read this https://pypi.org/project/django-mathfilters/

Answer 2

Instead of involving the js script, I will recommend creating total_value on the Django side and moving it to the template.

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

I am not sure which way you follow to render the template, but should look at this one

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

Answer 3

val() returns value attribute like in <input type="text" value=something/> and html() returns the content (innerHTML) of selected element.

So modify your codes like this and you are good to go. (I am assuming that django returns a numeric value in {{ s_books.count }} and {{ 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

});

Answer 4

div elements don't have a value , they have textContent and innerHTML (see this question's answers for details).

But the contents of those div elements will have lots of things in them other than the numbers you're looking for. While you could isolate the number from the text (or retrieve it just from the b element within the div ), those are both fragile solutions that will break if someone changes the template in seemingly-innocent ways.

I would suggest you handle this in the template, but sadly I don't do Django so I can't point to how to do that. (I had hoped you could do {{ s_books.count + g_books.count }} but this suggests to me you can't, which seems surprising.)

If you really want to handle this with client-side code, store the values you want in data-* attributes on the div elements:

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

Then grab that data-* attribute:

$(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}`); 
});