Why is my else-if Javascript condition not working?

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.