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.

You are building the finalOrder text inside the loop. Every time through the loop the last thing it does is set the message to "You ordered coffee with ". You should grab all the selections inside the loop (put them in an array/set/map/object/etc) and then build the text once you have everything figured out and have left the loop. — Danny
– Danny, Commented May 17, 2021 at 14:06

Lawrence Cherone · Accepted Answer · 2021-05-17 14:12:24Z

1

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
}

answered May 17, 2021 at 14:12

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

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

Comments

Bohdan Kholodenko · Accepted Answer · 2021-05-17 14:12:45Z

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>

MinusFour · Accepted Answer · 2021-05-17 14:15:52Z

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";
        }             
 }

Marci · Accepted Answer · 2021-05-17 14:22:22Z

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>

Jazzly · Accepted Answer · 2021-05-17 14:10:40Z

0

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;
        }             
 }

answered May 17, 2021 at 14:10

Jazzly

665 bronze badges

Comments

Liyanna · Accepted Answer · 2021-05-17 14:46:19Z

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;
        }

Collectives™ on Stack Overflow

Why is my else-if Javascript condition not working?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related