Question

我正在阅读他们在reddit上发布的网站上的其他代码，他们创建了一个随机名称生成器。我了解除了选择验证之外的大部分内容。这是该网站的链接。 http://saturdaykid.com/usernames/generator.html。我对JavaScript仍然很陌生，但是这个网站让我很清楚JavaScript在网站中的使用方式。

我不明白if语句中发生了什么。在Markup中，我看不到select元素或选项元素的类名。所以基本上，我不理解if语句是if (!selectedAdj)验证此元素的值是否为空？如果标记中最初没有，那么为什么会创建一个className？

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

Answer 1

“if（！selectedAdj）验证此元素的值是否为空？”

是的。当选择：value =“”选项时，这是非传递性的javascript。

“如果最初没有，则为什么会创建一个className 标记？“

- 创建 - ＆gt; 指定 className（请参阅http://saturdaykid.com/usernames/stylin.css了解.notSelected CSS选择器）以允许转换效果。

他在他的CSS中写了.notSelected类，他正在使用javascript 如果（！selectedAdj）为真，则分配一个className？

当登陆此页面的人点击“生成你的名字”但是任何选择时，“验证”功能将首先检查“形容词”并将此类分配给它并返回false以退出该功能本身。如果“形容词”被赋值，则className将赋值“”，空赋值的结果将继承css选择器返回给该对象（“.select” - 在stylin.css中）。 “Noun”也是如此。如果两个值都被选中，则会调用“generator”函数

Answer 2

这是一个更好的实现，几乎完全相同（除非它验证两个字段，即使两者都是空的），也许它更容易理解：

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

原始功能有很多重复。

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

2 个答案: