Question

我正在创建一个随机名称选择器（而不是生成器），当我将Alex放在文本框中时，它应该从randomNicknames数组中选择一个随机名称-这是可行的。但是当我输入除Alex以外的其他名称时，它仍然会从randomNicknames数组中选择一个随机名称。我想让它在用户输入alex以外的其他名称时从randomNicknames2数组中选择一个名称。

let realName = document.getElementById("name");

let randomNicknames = [
    "Noob",
    "Doge",
    "Roblox Bully",
    "Mama",
    "Doodle"
];

let randomNicknames2 = [
    "Ironman",
    "Howard the Alien",
    "Roblox rich kid",
    "Moto Moto",
    "Muhammad the 2nd"
];

let randomNick = randomNicknames[Math.floor(Math.random() * randomNicknames.length)];
let randomNick2 = randomNicknames2[Math.floor(Math.random() * randomNicknames2.length)];

function generate() {
    if (realName == "Alex" || "alex" || "Alexander" || "alexander") {
    document.getElementById("demo").innerHTML = randomNick;
    } else {
        document.getElementById("demo").innerHTML = randomNick2;
    }
}

p {
    font-size: 20px;
}

<!DOCTYPE  html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>Nickname Generator</title>
</head>

<body>
    Add your first name: <input type="text" id="name" autocomplete="off">
    <button onclick="generate()">Generate!</button>
    <br>
    <br>
    Your nickname: <p id="demo"></p> 
</body>

</html>

Answer 1

将if条件更改为以下条件

if (realName == "Alex" || realName == "alex" || realName == "Alexander" ||realName ==  "alexander")

使用.value从输入框中获取值。没有它，您将获得整个输入元素

let randomNicknames = [
    "Noob",
    "Doge",
    "Roblox Bully",
    "Mama",
    "Doodle"
];

let randomNicknames2 = [
    "Ironman",
    "Howard the Alien",
    "Roblox rich kid",
    "Moto Moto",
    "Muhammad the 2nd"
];

 

function generate() {
let realName = document.getElementById("name").value;

    if (realName == "Alex" || realName == "alex" || realName == "Alexander" ||realName ==  "alexander") {
    document.getElementById("demo").innerHTML = randomNicknames[Math.floor(Math.random() * randomNicknames.length)];
    } else {
        document.getElementById("demo").innerHTML = randomNicknames2[Math.floor(Math.random() * randomNicknames2.length)];
    }
}

p {
    font-size: 20px;
}

<!DOCTYPE  html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>Nickname Generator</title>
</head>

<body>
    Add your first name: <input type="text" id="name" autocomplete="off">
    <button onclick="generate()">Generate!</button>
    <br>
    <br>
    Your nickname: <p id="demo"></p> 
</body>

</html>

Answer 2

我认为你必须写

    if (realName.value == "Alex" || realName.value == "alex" || realName.value == "Alexander" || realName.value == "alexander") {

可以简化为

    let name = realName.value.toLowerCase();
    if (name  == "alex" || name  == "alexander") {

Answer 3

let alexNames = [
    "Alex",
    "alex",
    "Alexander",
    "alexander"
];

let randomNicknames = [
    "Noob",
    "Doge",
    "Roblox Bully",
    "Mama",
    "Doodle"
];

let randomNicknames2 = [
    "Ironman",
    "Howard the Alien",
    "Roblox rich kid",
    "Moto Moto",
    "Muhammad the 2nd"
];

function generate() {
    let realName = document.getElementById("name").value;
    let randomNick = randomNicknames[Math.floor(Math.random() * randomNicknames.length)];
    let randomNick2 = randomNicknames2[Math.floor(Math.random() * randomNicknames2.length)];

   if (alexNames.includes(realName)) {
        document.getElementById("demo").innerHTML = randomNick;
    } else {
        document.getElementById("demo").innerHTML = randomNick2;
    }
}

Answer 4

问题出在realName变量的初始化上。

在末尾添加.value

let realName = document.getElementById("name").value;

也将其放在generate()函数中

function generate() {
        let realName = document.getElementById("name").value;
        if (realName === "Alex" || realName === "alex" || realName === "Alexander" || realName === "alexander") {

            let randomNick = randomNicknames[Math.floor(Math.random() * randomNicknames.length)];
            document.getElementById("demo").innerHTML = randomNick;

        } else {

            let randomNick2 = randomNicknames2[Math.floor(Math.random() * randomNicknames2.length)];
            document.getElementById("demo").innerHTML = randomNick2;

        }
        console.log(Math.floor(Math.random() * randomNicknames.length));
    }

您还可以使用console.log()来检查变量是否具有正确的值

console.log(realName);

JavaScript不会从特定数组列表中随机选择名称

4 个答案: