Jquery code is sloppy

Question

my shoppingcart is working but i used to many var and functions and i think it looks sloppy. i dont know how to set it right.

here is the Jsfiddle link:

https://jsfiddle.net/z0c1ja37/

can someone help me to put things right in this code?

look at my jsfiddle link there is the full code

$('.productprijzen').hide();
var $select = $('<select>').addClass('keuzes');
$select.append('<option>Kies je optie</option>');
$select.append('<option value="volvo">Volvo</option>');
$select.append('<option value="saab">saab</option>');
$select.append('<option value="peugeot">peugeot</option>');
$select.append('<option value="mazda">mazda</option>');

$select.on('change', function () {
    $parent = $(this).closest(".row");
    $('.productprijzen', $parent).slideDown();

    // prijs en btw laten zien
    var merk = $(this).val();
    var productInfo = oProducten[merk];
    $parent.find('.prijs').html("€" + productInfo.prijs);
    $parent.find('.btw').html(productInfo.btw + "%");

    // berekening van aantal x prijs
    var $aantalKeuze = $parent.find('input.aantal');
    var $subtotaal = $parent.find('.sub');

    $aantalKeuze.bind('keyup mouseup', function () {
        var $subtotaalUiteindelijk = productInfo.prijs * $aantalKeuze.val();
        $subtotaal.html($subtotaalUiteindelijk);

        var totaalBtw6 = 0;
        var totaalBtw21 = 0;
        var $totaal = 0;
        var $subtotaalVeld = $(".sub");
        $subtotaalVeld.each(function () {
            if ($(this).text() !== "") {
                $totaal = $totaal + Number($(this).text());
            }
        });

Answer 1

Use named functions

It's very common to write event handlers inline as anonymous functions, but as code gets more complex, this leads to deeply nested code that can be hard to follow. The inner event in particular could be something like $aantalKeuze.bind('keyup mouseup', handleAantalKeuzeChange); (apologies for the mix of languages).

Register events only once

At the moment, you seem to be registering the keyup mouseup handler every time the user changes the parent select. If the HTML it's checking isn't being replaced, this is going to end up with duplicate handlers. If the HTML is dynamically created (which doesn't show in this code) you could use a .on() "delegated event" to bind it in advance.

Separate UI logic from calculations

Try to separate your workflow into:

1. Get data from HTML
2. Calculate values (totals etc)
3. Populate new HTML

This might mean more (named!) functions, or it might just mean moving lines around and more variables. The aim is that you should be able to examine and change the "business logic" in step 2 separately from the "display logic" in steps 1 and 3.

Be consistent

You mostly use the convention that variables prefixed with $ are jQuery DOM objects and others are values, but you have var $totaal = 0; instead of var totaal = 0;. This is closely related to the previous point - the business logic part of the code should have no $ variables in it.

You mostly scope your variables with var, but have it missing on $parent. Because of how JS "hoists" variables, it may be sensible to declare all your variables close to the top of the function as possible. Again, this may encourage you to split out some sections into their own function - if a set of variables is only used within a tight section of code, that code might be asking to become a separate function, with defined inputs and outputs.

You mostly use $parent.find(...), except in $('.productprijzen', $parent). Standardise on one or the other, unless I'm mistaken and there's a significant difference.

Answer 2

My (Disclaimer: opinion-based from a German point of view) main issue here, are the non-english identifier. Of course I can guess some, but a minimized version would be as readable and unsuitable for an detailed review as this code. Always code in english, you never know who will need to read your code.

In addition to that, it is actually up to you, if you prefer a clarifying variable, if it is only used once in the next line, or not. There is no global valid recommendation.