Question

第一个学期的WEB学生在这里。本学期末向JavaScript介绍。教授没有详细说明。我已经在W3schools和Google上搜索以寻求帮助。在HTML中，我要创建一个输入文本框（type =“ text”）和一个按钮（type =“ button”）no。这部分很简单。

我不了解的部分是JavaScript。页面加载时，文本框应获得焦点。我要在包含JS注释（而不是html注释）的HTML页面内添加JS，并解决以下任务：编写一个事件，该事件将在用户单击按钮时执行。如果用户输入了正确的密码，则在页面上显示“ OK”，否则显示“ ERROR”以获取不正确的密码代码。正文的fontSize更改为30px。

现在...我意识到这应该是一个简单的项目，我应该可以向我的教授提问，但这是一个在线课程，当我寻求帮助时，他会让我感到震惊。我什至不知道还能搜索什么。 W3schools没有相似之处。请帮忙。我就是不明白。我不想为我做这件事。仅将其他人的代码添加到我的项目中，而不学习将来我需要的东西是没有意义的。我正在寻找一些资源来帮助我更好地理解我正在努力解决的项目的各个部分。谢谢！

W3schools 谷歌搜索

<label for="password">Password:</label>
<input id="password" type="text" />
<input id="Button1" type="button" value="Run" onclick="passcheck()" />
<p id="result">
  result:
</p>

Answer 1

您可以尝试以下操作：

<body>
<div>
  Password: 
  <input id="password" type="text" />
  <input id="Button1" type="button" value="Run" onclick="passcheck()" />
</div>
Result: <span id="result"/>
<script>

function passcheck() {
  const resultRef = document.getElementById('result');
  const inputRef = document.getElementById('password');

  /* You can pass any other condition 
     for checking the validity of the password
     instead of inputRef.value.length >= 6
  */
  const resultText = inputRef.value.length >= 6 ? 'OK' : 'ERROR';

  resultRef.innerHTML = resultText;
}
</script>
</body>

此外，最好使用type =“ password”以获得更好的可用性 https://www.w3schools.com/html/html_form_input_types.asp

只需通过w3schools上的所有JS教程 https://www.w3schools.com/js/js_htmldom_methods.asp

希望对您有帮助）

Answer 2

欢迎来到JavaScript世界！

据我了解，您要做两件事。 1）将输入集中在负载上 2）点击按钮进行验证 3）使用JavaScript更改字体大小

首先，要使任何输入元素集中在JavaScript的负载上，我们需要获取该元素，然后可以简单地调用JavaScript的tue focus函数。

<script>
   document.getElementById(“password”).focus();
</script>

在上面给出的代码中，我们通过getElementById获取任何element（input），然后通过调用focus（）函数将其设置为focused。

第二，再次，您必须在函数中获取该password元素并获取其值并进行一些验证。

<script>
     function passcheck(){
        var password= document.getElementById(“password”).value;

         if(password == ‘your password’){
            alert(“Ok”);
        }else{
            alert(“invalid password”);
         }
     }
</script>

在上面的代码中，该值是element的属性，并且是您在输入（密码）中键入的实际值。

第三，您可以创建诸如changeFont（）之类的函数并进行更改。

<script>  
    function changeFont(){
        document.getElementById(“your element id”).fontSize=     “30px”
     }
</script>

最终的JavaScript代码：

<script> 
document.getElementById(“password”).focus();


function passcheck(){
        var password= document.getElementById(“password”).value;

         if(password == ‘your password’){
            alert(“Ok”);
        }else{
            alert(“invalid password”);
         }
     }

 function changeFont(){
   document.getElementById(“your element id”).fontSize= “30px”
 }
</script>

如果您想了解有关JavaScript的更多信息，请访问w3schools

html输入文本“密码框”和按钮以检查密码是否正确，以显示“确定”或“错误”

2 个答案: