基本的 Javascript 名称输入验证答案

【问题标题】：Basic Javascript name input validation基本的 Javascript 名称输入验证
【发布时间】：2022-12-11 03:01:27
【问题描述】：

您好我是 javascript 的新手，只想做一个基本的 else if 名称输入验证。我一直遇到同样的问题。它直接去else。请帮忙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Project</title>
</head>
<body>

   <label id =myLabel>Enter your friends name:</label><br>
   <input id="textField" type="text" placeholder="Enter name"><br>
   <button id="submitBtn" type="button">Submit</button><br>
   <p id="outputName"></p>

    
    

    <script src="index.js"></script>
</body>
</html>

let username = document.getElementById("textField").value;
let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");


submit.onclick = function(){
    if(username === "Rodney" || username === "rodney"){
        output.innerHTML = username + " access denied";
        
    }
        
    else if(username === "Alexander" || username === "alexander"){
        output.innerHTML = username + " access granted";
        
    }
    else{
        output.innerHTML = username + " not defined";
    }

}

我想在 id 为 outputName 的段落标记中输出名称和授予或拒绝的访问权限。

【问题讨论】：

标签： javascript dom-manipulation

【解决方案1】：

当用户还没有输入任何内容时，您已经保存了一个空的用户名值

你必须获取onclick中的值

let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");


submit.onclick = function(){
    let username = document.getElementById("textField").value;
    if(username === "Rodney" || username === "rodney"){
        output.innerHTML = username + " access denied";
        
    }
        
    else if(username === "Alexander" || username === "alexander"){
        output.innerHTML = username + " access granted";
        
    }
    else{
        output.innerHTML = username + " not defined";
    }

}

或者

let usernameField = document.getElementById("textField")
let submit = document.getElementById("submitBtn");
let output = document.getElementById("outputName");


submit.onclick = function(){
    const username = usernameField.value;
    if(username === "Rodney" || username === "rodney"){
        output.innerHTML = username + " access denied";
        
    }
        
    else if(username === "Alexander" || username === "alexander"){
        output.innerHTML = username + " access granted";
        
    }
    else{
        output.innerHTML = username + " not defined";
    }

}

【讨论】：