Fjcym Blah Fjcym Blah - 1 month ago 8
CoffeeScript Question

Alert only displayed if all 5 values exist

I have created a program for ordering coffees in JavaScript and HTML, using

button's
and
drop down menus
for the ordering of the individual coffees. I've given each select
tag
an
id
, which allows me to take the name values for the coffees and display them in the final alert, with the prices and coffee sizes. If the user selects the maximum number of coffees, the
confirm()
function works perfectly. However, if less than the maximum number of coffees are selected, the values cannot be taken from the drop down menus for some reason, blocking my function from being run.

//Function for creating the coffee menu
function selectCoffee(n) {
var MENU = "";
coffeesOrdered = n;

for (i = 0; i < COFFEENAME.length; i++) {
MENU += "<option value='" + COFFEENAME[i] + "' oninput=\"setValue(this.value);\">" + COFFEENAME[i] + " </option><br>";
}


for (i = 0; i < n; i++) {
console.log(n);
document.getElementById("drinkMenu").innerHTML = document.getElementById("drinkMenu").innerHTML + "<form id='coffeeMenu'> <select id='drink" + i + "'>" + MENU + "</select>" + "<br>" + "Large Drink <input type='checkbox' onClick='return checkMenu()' id='large" + i + "'> </form>";
}

document.getElementById("buttons").innerHTML = "";

}

//How i take the variables for the drink names
enter code here
var drink0 = document.getElementById("drink0").value;
var drink1 = document.getElementById("drink1").value;
var drink2 = document.getElementById("drink2").value;
var drink3 = document.getElementById("drink3").value;
var drink4 = document.getElementById("drink4").value;


Link to my program on Codepen

Answer

Just a brief solution, I was using Array's when printing the final result, which meant it was trying to call on results that didn't exist, causing the function to fail when ordering 1, 2, 3, or 4 coffees.

Comments