The Code

                    
                        // Entry Function, for when we click our Yo Ho Button
                        function getValues() 
                        {
                            // Get the values from the three forms.
                            // Parse to an Int
                            let yoValue = parseInt(document.getElementById('yoValue').value);
                            let hoValue = parseInt(document.getElementById('hoValue').value);
                            let countToValue = parseInt(document.getElementById('countTo').value);
                        
                                // Check Validity
                                if (Number.isInteger(yoValue) && Number.isInteger(hoValue) && Number.isInteger(countToValue)) 
                                {
                                    // Generate
                                    let numbersArray = generateYoHo(countToValue);
                                    // Display
                                    displayYoHo(yoValue, hoValue, numbersArray)
                                }
                                else 
                                {
                                    Swal.fire
                                    ({
                                            title: "Scurvy Dog!",
                                            text: "Ye be needin' numbers!",
                                            icon: 'error'
                                    })
                                }
                        }
                        
                        // Logic Function, for parsing all the numbers from the received data
                        function generateYoHo(countToNumber)
                        {
                            // For loop to count through the values and generate the array
                            let numbersArray = [];
                        
                                for (i = 1; i <= countToNumber; i++) 
                                {
                                    numbersArray.push(i);
                                }

                            return numbersArray;
                        }
                        
                        
                        // Display Function, to display it onto the html page.
                        function displayYoHo(yoValue, hoValue, numbers) 
                        {
                            // Grab value for the html element where we will place it.
                            let tableBody = document.getElementById('yoHoTable');
                            let tableHtml = "";
                            
                            //  For each array value check if it is divisible by yo && ho
                            for (i = 0; i < numbers.length; i++) 
                            {
                        
                                let value = numbers[i]
                                let className = '';
                        
                                    if (i % 5 == 0) 
                                    {
                                        tableHtml += '<tr>'
                                    }
                        
                                    // print yoho
                                    if (numbers[i] % yoValue == 0 && numbers[i] % hoValue == 0) 
                                    {
                                        className = 'yoHo';
                                        tableHtml += `<td class="${className}">Yo-Ho! - ${value}</td>`;
                                    }

                                    // If divisible yo && not divisible by ho
                                    // Print Yo
                                    if (numbers[i] % yoValue == 0 && numbers[i] % hoValue != 0) 
                                    {
                                        className = 'yo';
                                        tableHtml += `<td class="${className}">Yo! - ${value}</td>`;
                                    }

                                    //If divisble by 5 && not 3
                                    //Print Ho
                                    if (numbers[i] % yoValue != 0 && numbers[i] % hoValue == 0) 
                                    {
                                        className = 'ho';
                                        tableHtml += `<td class="${className}">Ho! - ${value}</td>`;
                                    }

                                    // If neither
                                    // Print Value
                                    if (numbers[i] % yoValue != 0 && numbers[i] % hoValue != 0) 
                                    {
                                        tableHtml += `<td>${value}</td>`;
                                    }
                        
                                    if ((i + 1) % 5 == 0) 
                                    {
                                        tableHtml += '</tr>'
                                    }
                            }
                    
                

The code is structured in three functions. Called functions will be detailed in their own sections. Click a headline() to scroll to that section of the code. And click the function name within the code to scroll to that write up section.

getValues()

---

This function grabs the values from the HTML inputs of yoValue, hoValue, and countTo. In the process of grabbing those values and setting them to the variables we also parse them directly into integers.

Next, we have an if statement to check if all the values entered are numbers and not text. We use the && operator to cover that all of the values are numbers. The if statement executes and either calls generateYoHo() and displayYoHo() or it produces a Sweet Alert to let them know that scurvy dogs needs numbers.

generateYoHo()

---

This function is used to generate the array of numbers between 1 to whatever number the user has chosen. It takes the parameter of countToNumber, It sets an empty array, then executes a for loop that increments by one after each time it pushes the value of i to the array.

displayYoHo()

---

Here we have the true backbone of this logical challenge. It starts with grabbing the document element of yoHoTable. Then tableHtml is assigned a blank string that will be used later. A for loop is used agai to iterate through each index of the array. I decided to use a series of if statements to solve this particular FizzBuzz style challenge.

The if statements make use of modulos, logical AND operators, and string template literals. The modulo operator, % allows us to receive the remainder after the division. So 10 % 5 would give us zero, since 10 is divided by five evenly. If we were to use instead 10 % 4 we would be given the remainder of 2. The logical AND operator is used similarly as we did when we checked the validity of numbers. Then we use string template literals to make it a bit easier and cleaner to assign new and continued values to tableHtml. Finally, we tack all of that on to the HTML to display for our user.