Why is my else-if Javascript condition not working?

Question

I created this coffee order-like form using Html, CSS, and Javascript.

This form allows the user the check the box to choose what does the user wants in his/her coffee. However, if the user doesn't want anything to add to his/her coffee, then the "order details" textbox should only display "you ordered coffee".

This is what it looks like when you check in the checkbox and click the "Show Order Details" button:

And then this is what it looks like if you don't check anything from the checkbox and click the "Show Order Details" button:

This is my source code by the way:

<script>
 
function coffeeOrder() {
        var order = document.orderForm.items.length;
        var itemValue = "";
            for (i = 0; i < order; i++) {
                var itemChecked = document.orderForm.items[i].checked;
                if (itemChecked == true) {
                    itemValue += document.orderForm.items[i].value +" ";
                }
                else {
                    document.getElementById("showOrder").value = "You ordered coffee only";
                }
            var finalOrder = "You ordered coffee with " +itemValue;
            document.getElementById("showOrder").value = finalOrder;
            }             
 }
        
 </script>

The textbox should only display "You ordered coffee". I've been doing different kinds of ways to resolve this and none of it seems to work.

I recently just started learning HTML and javascript so this is really hard for me. It would be very helpful if someone pointed out what should I do to improve and resolve my code.

Answer 1

after hours of trying, I finally resolved this lol. but in this case, it only hows in the textbox "You ordered coffee" and not "You ordered coffee ONLY".

function coffeeOrder() {
            var order = document.orderForm.items.length;
            var itemValue = "";
            let withWordLimiter = false;

            for (i = 0; i < order; i++) {
                var itemChecked = document.orderForm.items[i].checked;

                if (withWordLimiter == false && itemChecked) {
                    itemValue += "with ";
                    withWordLimiter = true;
                }

                if (itemChecked) {
                    itemValue += document.orderForm.items[i].value + " ";
                }
            }
            var finalOrder = "You ordered coffee " + itemValue;
            document.getElementById("showOrder").value = finalOrder;
        }

Answer 2

You can achieve this with a extra variable like onlyCoffee. When no checkbox is checked the onlyCoffee is true and give you "You ordered coffee only" otherwise it gives you "You ordered coffee with ..."

<script>
 
function coffeeOrder() {
        var order = document.orderForm.items.length;
        var itemValue = "";
        var onlyCoffee = true;
        for (i = 0; i < order; i++) {
            var itemChecked = document.orderForm.items[i].checked;
            if (itemChecked == true) {
                itemValue += document.orderForm.items[i].value + " ";
                onlyCoffee = false;
            }
            else {
                document.getElementById("showOrder").value = "You ordered coffee only";
            }
            if (onlyCoffee == false)
            {
                var finalOrder = "You ordered coffee with " + itemValue;
                document.getElementById("showOrder").value = finalOrder;
            }
        }             
 }
        
 </script>

Answer 3

A very simple way to fix this code would be to add a check after you've done getting the list of extra items.

function coffeeOrder() {
        var order = document.orderForm.items.length;
        var itemValue = "";
        for (i = 0; i < order; i++) {
            var itemChecked = document.orderForm.items[i].checked;
            if (itemChecked == true) {
                itemValue += document.orderForm.items[i].value +" ";
            }
        }
        if(itemValue !== ''){ //non-empty string, so you did add other items
            var finalOrder = "You ordered coffee with " +itemValue;
            document.getElementById("showOrder").value = finalOrder;
        } else { //empty string, no extra items
            document.getElementById("showOrder").value = "You ordered coffee only";
        }             
 }

Answer 4

You have a for cycle that iterates through every orderform item. The value of variable "itemChecked" changes every iteration, as it indicates whether or not i-th orderform item was checked.

What happens is that if LAST orderform item is not checked, you'll get else condition running. You should have a variable at greater scope (outside of for cycle) that will indicate whether any orderform item was checked.

Then, you will need to check if this new variable is true and if it's not - set element's value to "You ordered coffee only"

Check out code below, it should work (though correct for syntax mistakes if there are any):

<script>
 
function coffeeOrder() {
        var order = document.orderForm.items.length;
        var itemValue = "";
        var anyItemChecked = false;
        for (i = 0; i < order; i++) {
            var itemChecked = document.orderForm.items[i].checked;
            if (itemChecked == true) {
                anyItemChecked = true;
                itemValue += document.orderForm.items[i].value +" ";
            }
        if anyItemChecked == false {
            document.getElementById("showOrder").value = "You ordered coffee only";
        }
        var finalOrder = "You ordered coffee with " +itemValue;
        document.getElementById("showOrder").value = finalOrder;
        }             
 }
        
 </script>

Answer 5

Rewrite as follows, put ordered items into an array, then construct a message from that.

function coffeeOrder() {
  const order = document.orderForm.items.length;
  
  // put ordered items into array
  const orderedItems = [];
  for (let i = 0; i < order; i++) {
    if (document.orderForm.items[i].checked) {
      orderedItems.push(document.orderForm.items[i].value)
    }
  }

  // construct message
  document.getElementById("showOrder").value = "You ordered coffee" + (
    orderedItems.length ? ' with ' + orderedItems.join(' ') : ' only'
  )
        
  return orderedItems
}

Answer 6

function coffeeOrder() {
let counter = 0;
    var order = document.orderForm.items.length;
    var itemValue = "";
        for (i = 0; i < order; i++) {
            var itemChecked = document.orderForm.items[i].checked;
            if (itemChecked === true) {
                itemValue += document.orderForm.items[i].value + ""
                counter = counter++
            }
            else if (counter === 0) {
                document.getElementById("showOrder").value = "You  ordered coffee only";
            }
        var finalOrder = "You ordered coffee with " +itemValue;
        document.getElementById("showOrder").value = finalOrder;
        }             
 }