使用JavaScript制作随机名称生成器

Question

I'm reading someone else code from a website they posted on reddit that they made to create a random name generator. I understand most of what's going on except for the select validation. Here's the link to the website. http://saturdaykid.com/usernames/generator.html . I'm still very new to JavaScript but this website is giving me a good idea of how JavaScript is used in a website.

I don't understand what's going on in the if statement. In the Markup there is no class names for the select elements or option elements that I can see. So basically, I'm not understanding the if statement is if (!selectedAdj) verifying if the value of this element is null? why does it create a className if there is none originally in the markup?

if (!selectedAdj) {
        var adj = document.getElementById("adjective");
        adj.className = "notSelected";
        return false;
    } else {
        var adj = document.getElementById("adjective");
        adj.className = "";
    }

Here's the entire function

// Ensures the user has chosen an adjective and a noun    
var validate = function() {
    var adjectives = document.getElementById("adjective");
    var selectedAdj = adjectives.options[adjectives.selectedIndex].value;
    if (!selectedAdj) {
        var adj = document.getElementById("adjective");
        adj.className = "notSelected";
        return false;
    } else {
        var adj = document.getElementById("adjective");
        adj.className = "";
    }
    var nouns = document.getElementById("noun");
    var selectedNoun = nouns.options[nouns.selectedIndex].value;
    if (!selectedNoun) {
        var noun = document.getElementById("noun");
        noun.className = "notSelected";
        return false;
    } else {
        var noun = document.getElementById("noun");
        noun.className = "";
    }
    generator(selectedAdj, selectedNoun);
};

Answer 1

"if (!selectedAdj)verifying if the value of this element is null?"

-Yes. When the option : value="" selected, this is nontransitive javascript.

"why does it create a className if there is none originally in the markup?"

- create -> assign className (see http://saturdaykid.com/usernames/stylin.css for .notSelected CSS selector) to allow transition effects.

he wrote the .notSelected class in his css and he's using javascript to assign a className if the (!selectedAdj) is true?

When the person that landed on this page hits "Generate Your Name" but dosent selected anything the "validate" function will first check for "Adjective" and assign this class to it and return false to exit the function itself. If the "Adjective" is assign the className will be assign "" value, the result of empty assign return the inherit css selector to this object (the ".select" - in stylin.css). Same is done to "Noun". If both values are selected next will call "generator" function

Answer 2

Here's a better implementation that does almost the same thing (except it validates both fields even if both are still empty), maybe it's a bit easier to understand:

var getSelected = function(elementId) {
    // Gets the "elementId" object
    var element = document.getElementById(elementId);
    // Gets it's currently selected value
    var selected = element.options[element.selectedIndex].value;
    if (!selected) {
        // No value selected, set class to .notSelected
        element.className = "notSelected";
        return false;
    }
    // A value was selected, remove class
    element.className = "";
    // this element is valid
    return selected;
}
var validate = function () {
    var adjective = getSelected("adjectives");
    var noun = getSelected("nouns");
    if (adjective && noun) {
        // Both are valid, continue
        generator(adjective, noun);
    }
}

The original function had a lot of repetition.