Fjcym Blah Fjcym Blah - 1 year ago 78
CoffeeScript Question

Alert only displayed if all 5 values exist

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

drop down menus
for the ordering of the individual coffees. I've given each select
, 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
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++) {
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 Source

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.