jQuery: if and else if statements with &&?

Question

I'm trying to create an if and else if statements using jQuery and I will have two conditions in the if and the else if statements, So I am using && as well.

However, every time I use the if and else if in my code, my code stops working and I cannot figure out why this is keep happening.

To explain this better, I've created this FIDDLE

The code in question is this:

    if ($button.text() == "+" && parseFloat(oldValue) == parseFloat(maximum)) {
    alert("You cannot do that");
    }else if($button.text() == "+" && parseFloat(oldValue) > parseFloat(maximum)){
.........................

if i change the code above to:

    if ($button.text() == "+") {
.........................

everything works fine as it should but with the if and else if statements, nothing seems to work and I don't see any errors in the consul either.

Could someone please advise on this issue?

is there something that I'm missing?

any help would be appreciated.

EDIT:

Based on some of the answers, I've edited my code but I still have a slight issue!

The issue is the number of the input and remaining changes even if the oldValue >= maximum. This is the FIDDLE

what happens when the old value is less that maximum? perhaps you should use less than or equal to in the first condition `parseFloat(oldValue) <= parseFloat(maximum)`? — Pete, Feb 01 '16 at 11:34
Hint: Look at the generated HTML in the console for `data-max`. — Evan Trimboli, Feb 01 '16 at 11:36
@Pete, if the oldValue is less that the maximum, the code should work as if there are no if statements. But when the maximum == oldvalue, the error/alert should pop up.. if that makes sense. — rooz, Feb 01 '16 at 11:36
@rooz, I have amended your fiddle so it works to show you where you are ending up in your if statement - it is working as I would expect it to: https://jsfiddle.net/m5oobxrq/2/. (given a maximum of 10). It looks like your are going into the"-" button click eventualities — Pete, Feb 01 '16 at 11:45
@rooz, please test my solution bellow, does it work as supposed? ;) — miguelmpn, Feb 01 '16 at 15:31

Pete · Answer 1 · 2016-02-01T12:17:41.910

1

Your conditions are all wrong - you haven't covered all eventualities of the + button press - only if it equals max or is greater than max.

As you didn't say what happens if the number is less than max, when your plus is pressed at 0, it is starting off less than max (I'm guessing max is greater than 0) and so your logic is going to your minus button press (the else part of your if) which doesn't do anything as you can't go less than 0.

So even though you click on the plus, it is firing the minus event.

I have reworked your if statement to keep your + and - separate:

if ($button.text() == "+") {
  // logic for + button press only
  if (parseFloat(oldValue) >= parseFloat(maximum)) {        
    alert("You cannot do that");
  } else {
    var newVal = parseFloat(oldValue) + 1;
    $('#remaining').html(parseFloat(entries) - 1);


    if (entries == 0) {
      //alert("You have no entries left!");


      //$('.continue').prop('disabled', true);
      alert("You have 0 entries left!");
      $('#remaining').html(0);
      //$('.continue').prop('disabled', true);
      var newVal = parseFloat(oldValue);
      //alert(newVal);

    }
  }
} else {  
  // logic for - button press only goes in the else
  // Don't allow decrementing below zero
  if (oldValue > 0) {
    var newVal = parseFloat(oldValue) - 1;
    $('#remaining').html(parseFloat(entries) + 1);

  } else {
    newVal = 0;
  }
}

Updated fiddle

If you want to keep your else if statements then try the following:

 if ($button.text() == "+" && parseFloat(oldValue) >= parseFloat(maximum)) {
    // this is invalid range for "+"
 } else if ($button.text() == "+" && parseFloat(oldValue) < parseFloat(maximum)) {
   // this is valid and covers off the rest every eventuality of your plus button
 } else {
   // this will be your minus button logic
 }

edited Feb 01 '16 at 12:17

answered Feb 01 '16 at 11:49

Pete

57,112
28
117
166

$button is not defined when we run your sample ;) – miguelmpn Feb 01 '16 at 12:06
@miguelmpn, sorry, shouldn't have been a snippet as I haven't bothered pasting the html in – Pete Feb 01 '16 at 12:08
@Pete, Based on your answer which helped alot, I've changed my code slightly. But i still have a small issue! could you please checkout my EDIT and the new Fiddle I added to my question and advise on the issue? – rooz Feb 01 '16 at 13:02
I think you missed the else off your second if so it is creating a completely new if instead of an else if – Pete Feb 01 '16 at 13:07
@Pete, no I removed the else from the second statement. the code acts strangely with an else if in the second statement. – rooz Feb 01 '16 at 13:09
so basically what i need to do now is to keep the value of input to its current value if the oldValue >= maximum and only allow the minus button to work instead of deleting the input value and continue adding up numbers. and I thought I don't need the second else in my statements. – rooz Feb 01 '16 at 13:13
I think you need to read up on if statements a bit more as I don't think you fully understand how they work, by removing the else if from the statement you are completely changing what will happen. Also, you need to be more concise about what you are expecting to happen per click as I have provided an answer based on your comments and question showing you where you should put logic for your different scenarios. If that doesn't work then I don't know what you are after – Pete Feb 02 '16 at 09:12

miguelmpn · Answer 2 · 2016-02-01T12:19:59.040

I'm still a bit confused, but I think I fixed your code, please check my solution in the FIDDLE I used a switch to simplify..

$(function() {

  $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

  $(".button").on("click", function() { 
    var $button  = $(this);
    var oldValue = $button.parent().find("input").val();
    var maximum  = $button.parent().find("input").attr("data-max");
    var entries  = $('#remaining').html();

    switch($button.text()) {
        case '+':
            if(entries == 0){
              alert("You have no entries left!");
              var newVal = parseFloat(oldValue);
            }else{
              var newVal = parseFloat(oldValue) + 1;
              $('#remaining').html(parseFloat(entries) - 1);
            }
            break;

        case '-':
            if (oldValue > 0) {
              var newVal = parseFloat(oldValue) - 1;
              $('#remaining').html(parseFloat(entries) + 1);
            } else {
              alert("You cannot do that");
              newVal = 0;
            }
            break;
    }

    $button.parent().find("input").val(newVal);
  });

});

jQuery: if and else if statements with &&?

2 Answers2