Sum elements with jQuery

user_10296344 0
Viewed 59

I'm trying to sum element from data-item-rate.

Actually, if you click Yes for the first item (Photo gallery), the total works. The total shows 300 $.

But, after, if you select Yes for the second or the third, the sum isn't working.

If I click on No, the total sum #total_estimate should remove the deleted item.

I think the problem is near:

$('p[data-item-rate]').each(function() {
    total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));
});

Do you know why please ?

$('li.nav-item').click(function() {

    id = $(this).data('id');
    name = $(this).data('name');
    rate = $(this).data('rate');
    value = $(this).data('value');

    $('#' + id + '_name').empty();
    $('#' + id + '_rate').empty();
    $('#' + id + '_rate').attr('data-item-rate', 0);

    if(value != 0) {
        value_sign = '$' + value;

        $('#' + id + '_name').html('<strong>' + name + '</strong>');
        $('#' + id + '_rate').html(value_sign);
        $('#' + id + '_rate').attr('data-item-rate', value);
    }

    updateTotal();
});

// Update the total
function updateTotal() {

    var total = 0;

    $('p[data-item-rate]').each(function() {
        total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));
    });

    total = total + ' $';

    $('#total_estimate').html(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Photos gallery</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="gallery" data-name="Photos gallery" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="gallery" data-name="Galerie photos" data-rate="Yes" data-value="300">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 300 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Contact form</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="contact-form" data-name="Contact form" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="contact-form" data-name="Formulaire de contact" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Newsletter</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
</div>



<div class="col-lg-4">
    <div class="cart-price">
        <div class="flexbox">
            <div>
                <p id="gallery_name"></p>
                <p id="gallery_rate" data-item-rate="0"></p>
                <hr />
                <p id="contact-form_name"></p>
                <p id="contact-form_rate" data-item-rate="0"></p>
                <hr />
                <p id="newsletter_name"></p>
                <p id="newsletter_rate" data-item-rate="0"></p>

            </div>
        </div>
        <hr>
        <div class="flexbox">
            <div>
                <p><strong>Total:</strong></p>
            </div>
            <div>
                <p class="fw-600" id="total_estimate">0 $</p>
            </div>
        </div>
    </div>
</div>

html jquery
1 Answers

set data-value of "No" by using if condition and change your updateall() function like below 

$('li.nav-item').click(function() {

    id = $(this).data('id');
    name = $(this).data('name');
    rate = $(this).data('rate');
    value = $(this).data('value');
   
   if(rate == "No")
   {
    if(parseInt(value) < 0)
    {
      $(this).data('value',0);
    }
   }
   else{  
     var dataval = "-"+value;
      $(this).siblings('li').data('value',dataval);
   }
    
    

    $('#' + id + '_name').empty();
    $('#' + id + '_rate').empty();
    $('#' + id + '_rate').attr('data-item-rate', 0);

    if(parseInt(value) > 0) {
        value_sign = '$' + value;

        $('#' + id + '_name').html('<strong>' + name + '</strong>');
        $('#' + id + '_rate').html(value_sign);
        $('#' + id + '_rate').attr('data-item-rate', value);
    }
    updateTotal(value);
});

// Update the total
function updateTotal(value) {

    /*var total = 0;

    $('p[data-item-rate]').each(function() {
        total += isNaN(parseInt($(this).data('item-rate'))) ? 0 : parseInt($(this).data('item-rate'));
        
    });
    total = total + ' $';*/
    var total = $('#total_estimate').html();
    total = total.split(" ");
    total = parseInt(total[0]) + parseInt(value) + " $"
    $('#total_estimate').html(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-8">
    <div class="row">
        <div class="col-lg-6">
            <h2>Photos gallery</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="gallery" data-name="Photos gallery" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="gallery" data-name="Galerie photos" data-rate="Yes" data-value="300">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 300 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Contact form</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="contact-form" data-name="Contact form" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="contact-form" data-name="Formulaire de contact" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-6">
            <h2>Newsletter</h2>
        </div>
        <div class="col-lg-6">
            <ul class="nav nav-tabs-outline">
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="No" data-value="0">
                    <a class="nav-link active" data-toggle="tab" href="#">
                    No
                    </a>
                </li>
                <li class="nav-item" data-id="newsletter" data-name="Abonnement infolettre" data-rate="Yes" data-value="250">
                    <a class="nav-link " data-toggle="tab" href="#">
                    Yes
                    <span class="badge badge-secondary">+ 250 $</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <hr>
</div>



<div class="col-lg-4">
    <div class="cart-price">
        <div class="flexbox">
            <div>
                <p id="gallery_name"></p>
                <p id="gallery_rate" data-item-rate="0"></p>
                <hr />
                <p id="contact-form_name"></p>
                <p id="contact-form_rate" data-item-rate="0"></p>
                <hr />
                <p id="newsletter_name"></p>
                <p id="newsletter_rate" data-item-rate="0"></p>

            </div>
        </div>
        <hr>
        <div class="flexbox">
            <div>
                <p><strong>Total:</strong></p>
            </div>
            <div>
                <p class="fw-600" id="total_estimate">0 $</p>
            </div>
        </div>
    </div>
</div>

user_61088820
Related