JSFiddle - React, Tailwind, and code Playground

(JQuery) Hangman game

by Don Schaefer

HTML

<h1>Hangman</h1>
<div id="div1">
    <p>Welcome to Hangman! Please select the category of words that you'd like to use for your game.</p>
    <select id="selCategory">
        <option value="mealTypes" selected="selected">Types of Meals</option>
        <option value="personalityTypes">Types of Personalities</option>
        <option value="homeTypes">Types of Homes</option>
    </select>
    <input type="submit" id="btnCategory" value="submit" />
</div>
<div id="div2" class="hide">        
    <p>Your word is...<span id="sWordToGuess"></span></p>    
    <hr />
    <p>You have <span id="sRemainingGuesses"></span> guesses remaining. Guess a letter:</p>
    <input type="text" id="inpGuess" />
    <input type="submit" id="btnGuess" value="submit" onmousedown="guessLetter();" />
</div>
<div id="div3" class="hide">
    <p id="pFinalMsg"></p>
    <input type="submit" id="btnReplay" value="Play Again" onmousedown="replay();" />
</div>

CSS

.hide {
    display: none;
}

JavaScript

/*///////////////// Establish Global Variables */
var mealTypes = ['sandwich','pizza','soup','salad','cheeseburger'];
var personalityTypes = ['introvert','extrovert','outgoing','quiet','assertive','opinionated','friendly','kind'];
var homeTypes = ['condominium','house','duplex','townhouse','apartment','mansion'];

var selectedCategory = [];
var arrayLength = selectedCategory.length;
var selectedWord;

/*///////////////// Set up Error Logging for Debugging */
function logData(f){
    //Group all relevant data into a single collapsable entry in the console. Note that the group is encapsulated by console.group() & console.groupEnd() commands rather than simply  'console.group(){' & '}' 
    console.group('Collected Data');
        console.log('Function: '+f); //Name of the function that triggered this command
        console.info('Category: '+$('#selCategory').val());
        console.info('Possible Words: '+selectedCategory.length);
        //console.warn('');  
        //console.assert(x > y, 'msg'); //Message to display if assertion returns false
    console.groupEnd();
}

/*////////////////// Functions for Step 1 */
function selectWord(){
    
}
$('#btnCategory').click(function(e){
    //Set the word category based on the value of the user's selection
    selectedCategory = eval($('#selCategory').val());        
    //Select the word to use from the selected category
    selectWord();
    $('#div1').addClass('hide');
    $('#div2').removeClass('hide');
    logData('btnCategory Clicked');
});

/*////////////////// Functions for Step 2 */