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

我正在阅读其他人在reddit上发布的网站代码，他们创建了一个随机名称生成器。除了select验证之外，我了解大部分正在发生的事情。这是该网站的链接。我对JavaScript还是很陌生，但这个网站让我对JavaScript在网站中的使用有了一个很好的了解

我不明白if声明中发生了什么。在标记中，我看不到select元素或option元素的类名。所以基本上，我不理解if语句是

if（！selectedAdj）

验证这个元素的值是否为null？如果标记中最初没有类名，为什么要创建类名

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

这是整个函数

// 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);
};

“如果（！selectedAdj）正在验证此元素的值是否为空？”

-对。选择选项：value=“”时，这是非Transitive javascript

“如果原始目录中没有类名，为什么要创建类名 加价？”

-创建->指定类名（参见.notSelected CSS选择器的相关信息）以允许转换效果

他在css中编写了.notSelected类，并使用javascript 如果（！selectedAdj）为true，是否分配类名

当登陆此页面的人点击“Generate Your Name”但dosent选择了任何内容时，“validate”函数将首先检查“形容词”并将该类分配给它，然后返回false以退出函数本身。如果“形容词”是assign，则类名将是assign“”值，空assign的结果将继承css选择器返回给该对象（style.css中的“.select”）。“名词”也是如此。

---

如果选择了这两个值，下一步将调用“generator”函数，这里有一个更好的实现，它可以做几乎相同的事情（除了验证两个字段，即使两个字段仍然为空），可能更容易理解：

// 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);
};

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);
    }
}

---

原始函数有很多重复。

好的，我只知道CSS的一些基础知识，所以让我试着理解一下。我假设他在css中编写了.notSelected类，如果（！selectedAdj）为true，他将使用javascript指定一个类名？如果条件不为null，则指定className=“”？为什么它返回false？为什么要给className分配一个空字符串呢？好的，那么如果给一个值分配了一个空字符串，它会被认为是空的吗？因为当if语句检查

if（！selected）

时，第一个选择的索引将是“选择你的形容词”选项，该选项在标记中被赋值为

value=”“

。这会使if语句为true并返回false吗？不完全是这样，原因是在javascript中，以下值都被视为false（除非您使用===运算符进行严格检查）：

“

，

0

，

false

，

null

，

未定义