0

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

Actually, when you click Oui for an item it add this one to the cart at the bottom of the page. When you click Non it remove it from the cart and recalculate the total.

But if you remove all from the cart, and then add a new item, the total shows an NaN.

Do you know why ?

$(document).ready(function() {

    $('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>
<form class="row gap-y">
    <div class="col-lg-8 sticky">
        <div class="row">
            <div class="col-lg-6">
                <h2>Site bilingue</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Non" data-value="0">
                        <a class="nav-link" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Oui" data-value="50">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <h2>Nom de domaine</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Non" data-value="0">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Oui" data-value="50">
                        <a class="nav-link " data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="cart-price">
            <div class="flexbox">
                <div>
                    <p id="bilingual_name"></p>
                    <p id="domain_name"></p>
                    <p id="hosting_name"></p>
                    <p id="ssl_name"></p>
                    <p id="gmaps_name"></p>
                    <p id="admin_name"></p>
                    <p id="ga_name"></p>
                    <p id="catalogue_name"></p>
                    <p id="online-store_name"></p>
                    <p id="blog_name"></p>
                    <p id="gallery_name"></p>
                    <p id="contact-form_name"></p>
                    <p id="newsletter_name"></p>
                </div>
                <div>
                    <p id="bilingual_rate" data-item-rate="0"></p>
                    <p id="domain_rate" data-item-rate="0"></p>
                    <p id="hosting_rate" data-item-rate="0"></p>
                    <p id="ssl_rate" data-item-rate="0"></p>
                    <p id="gmaps_rate" data-item-rate="0"></p>
                    <p id="admin_rate" data-item-rate="0"></p>
                    <p id="ga_rate" data-item-rate="0"></p>
                    <p id="catalogue_rate" data-item-rate="0"></p>
                    <p id="online-store_rate" data-item-rate="0"></p>
                    <p id="blog_rate" data-item-rate="0"></p>
                    <p id="gallery_rate" data-item-rate="0"></p>
                    <p id="contact-form_rate" data-item-rate="0"></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>
</form>
PacPac
  • 267
  • 2
  • 8
  • 2
    Be careful mixing `.data` and `.attr`, see https://stackoverflow.com/questions/28335833/get-wrong-value-in-data-attribute-jquery/28335905#28335905 – Barmar Jun 29 '19 at 15:00

3 Answers3

1

Your value is "--0" and cant not parse to number.

Can write a function to remove by replace it with value = removeDuplicates(value.toString());

function removeDuplicates(str){
  return [...new Set(str.split('-'))].join('-');
}



// Update the total
    function updateTotal(value) {
        value = value.replace('--', '-');
        /*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);
    }


$(document).ready(function() {

    $('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) {
        value = removeDuplicates(value.toString());
        /*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);
    }
});

function removeDuplicates(str){
  return [...new Set(str.split('-'))].join('-');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="row gap-y">
    <div class="col-lg-8 sticky">
        <div class="row">
            <div class="col-lg-6">
                <h2>Site bilingue</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Non" data-value="0">
                        <a class="nav-link" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Oui" data-value="50">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <h2>Nom de domaine</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Non" data-value="0">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Oui" data-value="50">
                        <a class="nav-link " data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="cart-price">
            <div class="flexbox">
                <div>
                    <p id="bilingual_name"></p>
                    <p id="domain_name"></p>
                    <p id="hosting_name"></p>
                    <p id="ssl_name"></p>
                    <p id="gmaps_name"></p>
                    <p id="admin_name"></p>
                    <p id="ga_name"></p>
                    <p id="catalogue_name"></p>
                    <p id="online-store_name"></p>
                    <p id="blog_name"></p>
                    <p id="gallery_name"></p>
                    <p id="contact-form_name"></p>
                    <p id="newsletter_name"></p>
                </div>
                <div>
                    <p id="bilingual_rate" data-item-rate="0"></p>
                    <p id="domain_rate" data-item-rate="0"></p>
                    <p id="hosting_rate" data-item-rate="0"></p>
                    <p id="ssl_rate" data-item-rate="0"></p>
                    <p id="gmaps_rate" data-item-rate="0"></p>
                    <p id="admin_rate" data-item-rate="0"></p>
                    <p id="ga_rate" data-item-rate="0"></p>
                    <p id="catalogue_rate" data-item-rate="0"></p>
                    <p id="online-store_rate" data-item-rate="0"></p>
                    <p id="blog_rate" data-item-rate="0"></p>
                    <p id="gallery_rate" data-item-rate="0"></p>
                    <p id="contact-form_rate" data-item-rate="0"></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>
</form>
Hien Nguyen
  • 24,551
  • 7
  • 52
  • 62
0

First of all, you don't have this case

if(rate == "No")

Check your date-rate

data-rate="Non"

Also, you used different types of data, like adding Int to the string. And you always need to declare variables

So this :

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

is now this :

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

Here is codepen, I removed part of the code, which is not connected to the problem you mentioned:

CodePen

If there'll be any questions I'll be happy to answer, thanks.

Davit Mkrtchyan
  • 449
  • 5
  • 15
  • It's working. But if I click more than one time on the `yes` or `no` button, it multiplicate the action. – PacPac Jun 29 '19 at 19:16
  • @PacPac, thanks for the update. Although I couldn't reproduce the problem you mentioned, so I updated Pen, anded your full code, and made little changes. Please check, does the problem still exist, and if yes, can you show it on the screenshot? Because it's very strange, there is no multiplication logic. Thanks – Davit Mkrtchyan Jul 01 '19 at 08:16
0

Just replace your code from var dataval = "-"+value; to var dataval = -value; for showing the value without NAN.

$(document).ready(function() {

    $('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>
<form class="row gap-y">
    <div class="col-lg-8 sticky">
        <div class="row">
            <div class="col-lg-6">
                <h2>Site bilingue</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Non" data-value="0">
                        <a class="nav-link" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="bilingual" data-name="Site bilingue" data-rate="Oui" data-value="50">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-6">
                <h2>Nom de domaine</h2>
            </div>
            <div class="col-lg-6">
                <ul class="nav nav-tabs-outline">
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Non" data-value="0">
                        <a class="nav-link active" data-toggle="tab" href="#">
                        Non
                        </a>
                    </li>
                    <li class="nav-item" data-id="domain" data-name="Nom de domaine" data-rate="Oui" data-value="50">
                        <a class="nav-link " data-toggle="tab" href="#">
                        Oui
                        <span class="badge badge-secondary">+ 50 $</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-lg-12">
                <p class="lead">
                    Lorem ipsum...
                </p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="cart-price">
            <div class="flexbox">
                <div>
                    <p id="bilingual_name"></p>
                    <p id="domain_name"></p>
                    <p id="hosting_name"></p>
                    <p id="ssl_name"></p>
                    <p id="gmaps_name"></p>
                    <p id="admin_name"></p>
                    <p id="ga_name"></p>
                    <p id="catalogue_name"></p>
                    <p id="online-store_name"></p>
                    <p id="blog_name"></p>
                    <p id="gallery_name"></p>
                    <p id="contact-form_name"></p>
                    <p id="newsletter_name"></p>
                </div>
                <div>
                    <p id="bilingual_rate" data-item-rate="0"></p>
                    <p id="domain_rate" data-item-rate="0"></p>
                    <p id="hosting_rate" data-item-rate="0"></p>
                    <p id="ssl_rate" data-item-rate="0"></p>
                    <p id="gmaps_rate" data-item-rate="0"></p>
                    <p id="admin_rate" data-item-rate="0"></p>
                    <p id="ga_rate" data-item-rate="0"></p>
                    <p id="catalogue_rate" data-item-rate="0"></p>
                    <p id="online-store_rate" data-item-rate="0"></p>
                    <p id="blog_rate" data-item-rate="0"></p>
                    <p id="gallery_rate" data-item-rate="0"></p>
                    <p id="contact-form_rate" data-item-rate="0"></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>
</form>

Feedback about Code:

  • Even I found below code which would be not useful for this functionality so you can remove it.
if(rate == "No") {
    if(parseInt(value) < 0) {
        $(this).data('value',0);
    }
}

Hope this works as per your requirement.

Speeday
  • 63
  • 8