Using function to change div content on checkbox click not working

Question

Same question more else if() statements causes it to stop working.

I'm building a custom order form for my ad agency where the user selects the items they want from a form checkbox and the subtotal/order summary table below updates accordingly. The client is required to get at least the base spot which is $1125, while the four secondary spots are optional and are $450. If the client decides to get extra[s], then the trafficking cost also goes up ($75 each).

Everything works properly until i get to the highest amount, and then then the table doesn't update properly.

updated fiddle with full problem: http://jsfiddle.net/joelslevy21/5v8Ltkxf/3/

updated script:

                    if ( totalFinal == "3,330" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("4");
                        $('#subTotalCompanion').text("$1,800");
                        $('#quantityTrafficking').text("5");
                        $('#subTotalTrafficking').text("$375");
                    } else if ( totalFinal == "2,775" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("3");
                        $('#subTotalCompanion').text("$1,350");
                        $('#quantityTrafficking').text("4");
                        $('#subTotalTrafficking').text("$300");
                    } else if ( totalFinal == "2,250" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("2");
                        $('#subTotalCompanion').text("$900");
                        $('#quantityTrafficking').text("3");
                        $('#subTotalTrafficking').text("$225");
                    } else if ( totalFinal == "1,725" ) {
                        $('#companion').css("display","block");
                        $('#quantityCompanion').text("1");
                        $('#subTotalCompanion').text("$450");
                        $('#quantityTrafficking').text("2");
                        $('#subTotalTrafficking').text("$150");
                    } else {
                        $('#companion').css("display","none");
                        $('#quantityTrafficking').text("1");
                        $('#subTotalTrafficking').text("$75");
                    }

Calling .getElementsByClassName() over and over again isn't good - why wouldn't you just use $('.final').each(...) ? — Pointy
– Pointy, Commented Aug 6, 2014 at 22:16
Here's a fixed version of the fiddle. I don't understand what the problem is, exactly. — Pointy
– Pointy, Commented Aug 6, 2014 at 22:23
@Pointy I wasn't aware that .getElementsByClassName() isn't the best way to call something by it's class, thanks for the info. Thanks for fixing the fiddle, what was wrong with it out of curiosity? The problem occurs after adding a spot to the order and you try to remove the spot, the trafficking quantity and subtotal in the order summary doesn't go back down to "1" and "$40" respectively, it stays at "2" and "$80". — Joel Levy
– Joel Levy, Commented Aug 6, 2014 at 22:26
Well there's nothing wrong with .getElementsByClassName(), but the browser has to work at it so doing it afresh with every iteration of the loop just to get a single element is terribly inefficient. Since you're already using jQuery, you might as well go all-in. All I did was move the JavaScript to the body (jsfiddle setting) and add a "quantity" element to the page because it was missing. — Pointy
– Pointy, Commented Aug 6, 2014 at 22:33
Why is your function orderSummary() inside your function calculate() and while(init = document.getElementsByClassName("final")[i++]) {? — Sean
– Sean, Commented Aug 6, 2014 at 22:42

Sean · Accepted Answer · 2014-08-06 23:27:21Z

1

Your Trafficking is always staying at 2/$80, as you are setting it to that due to your if/else/if/else block

                if ( totalFinal == "805" ) {
                    $('#companion').css("display","block");
                    $('#quantityTrafficking').text("2");  // Sets to 2 
                    $('#subTotalTrafficking').text("$80");  // Sets to $80
                } else {
                    $('#companion').css("display","none");
                    $('#quantityTrafficking').text("1");  // Ignored due to other else
                    $('#subTotalTrafficking').text("$40"); // Ignored due to other else
                }
                if ( totalFinal == "1,095" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("2");
                    $('#subTotalCompanion').text("$500");
                    $('#quantityTrafficking').text("3");  // Sets to 3
                    $('#subTotalTrafficking').text("$120"); // Sets to $120

                } else {
                    $('#quantityTrafficking').text("2"); // Sets to 2, as it overwrites other else
                    $('#subTotalTrafficking').text("$80"); // Sets to $80, as it overwrites other else
                    $('#quantityCompanion').text("1");
                    $('#subTotalCompanion').text("$250");
                }

What you want is an if/elseif/else block

                if ( totalFinal == "1,095" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("2");
                    $('#subTotalCompanion').text("$500");
                    $('#quantityTrafficking').text("3");
                    $('#subTotalTrafficking').text("$120");
                } else if ( totalFinal == "805" ) {
                    $('#companion').css("display","block");
                    $('#quantityCompanion').text("1");
                    $('#subTotalCompanion').text("$250");
                    $('#quantityTrafficking').text("2");
                    $('#subTotalTrafficking').text("$80");
                } else {
                    $('#companion').css("display","none");
                    $('#quantityTrafficking').text("1");
                    $('#subTotalTrafficking').text("$40");
                }

edited Aug 6, 2014 at 23:27

answered Aug 6, 2014 at 23:04

Sean

12.4k3 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel Levy Over a year ago

thanks!! worked perfectly. In regards to declaring the orderSummary() function, is it detrimental having it inside the calculate function, or is it more of a best-practice reason? btw, how do you get inline code to show up in comments? I'm a noob.. can't figure it out

Sean Over a year ago

It is just best-practice to not nest function declarations, to make the functions usable outside of the parent function. To write code in the comments wrap the code in backticks ` -> `$(function() { ... }`. To include a backtick, escape it -> \`

Collectives™ on Stack Overflow

Using function to change div content on checkbox click not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related