html输入文本“密码框”和按钮检查密码是否正确显示“OK”或“ERROR”答案

【问题标题】：html input text "password box" and button to check if a password is correct to display "OK" or "ERROR"html输入文本“密码框”和按钮检查密码是否正确显示“OK”或“ERROR”
【发布时间】：2019-04-10 16:18:13
【问题描述】：

第一学期 WEB 学生在这里。本学期末介绍了 JavaScript。教授没有详细介绍任何类型的细节。我在 W3schools 和谷歌上搜索过帮助。在 HTML 中，我要创建一个输入文本框（type="text"）和一个按钮（type="button"），没有 .这部分很简单。

我不理解的部分是 JavaScript。页面加载时文本框应获得焦点。我要在包含 JS 注释（不是 html 注释）的 HTML 页面中添加 JS 并解决以下任务：编写一个在用户单击按钮时将执行的事件。如果用户输入了正确的密码，则在页面上显示“OK”，否则显示“ERROR”以获得不正确的密码代码另一个按钮，如果单击该按钮。 body的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>

【问题讨论】：

寻找一些关于在表单控件中获取和设置值的教程（<input>, <select>,<textarea> 等）。还有关于表单控制事件的教程
您有什么具体问题吗？我们无法为您完成作业，但如果您有特定的想法需要帮助，那么我们可以看看。否则，就像 charlie 说的，找一些基本的 JS 教程，它们在 Internet 上随处可见。
我需要为一些教程等指明正确的方向。我不想为我完成作业。在没有教授任何指示的情况下，这被抛在了我们的腿上。针对我遇到的相同问题发布了多次讨论，教授的回答通常是“我不知道”，如果不为自己做，我不会学习这个。很抱歉，我的问题被认为是在寻求答案。我现在要编辑。
帮自己一个忙，尽可能远离 W3 学校。几乎所有专业人士都知道，尽管他们的搜索引擎优化结果很好，但他们提供的信息往往不完整、过时、误导或完全错误。相反，请使用众所周知的权威来源Mozilla Developer Network。而且，如果您的教师推荐 W3 学校，则表明他/她对他/她所教的主题不是很了解。
我只能说 w3schools 很少有帮助。

标签： javascript html

【解决方案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

希望对你有帮助）

【讨论】：

我在读的每个地方都说同样的东西 type="password" 但教授特别说要使用 type="text" 我真的不明白为什么。谢谢你的帮助。
我们对 Stack Overflow 的问题有一定的期望，其中一些期望是 OP 会提前进行研究，并在发布之前尝试自己的解决方案。如果我们为不符合这些标准的问题提供答案，我们只会鼓励更多糟糕的问题。这就是为什么我们提供 cmets，而不是上面的答案。
另外，请参阅我在问题下方的评论，了解为什么将 W3 学校作为资源引用不是一个好主意。
嗨 Scott，我不同意，w3schools 非常适合初学者，尤其是 HTML 和 CSS 课程。 MDN 也很棒，但需要进一步阅读。这只是我的意见）

【解决方案2】：

欢迎来到 JavaScript 世界！

据我所知，您想做两件事。 1) 将输入集中在负载上 2）对按钮单击进行验证 3) 使用 JavaScript 更改字体大小

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

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

在上面给出的代码中，我们通过 getElementById 获取任何元素（输入），然后通过调用 focus() 函数将其设置为焦点。

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

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

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

在上面的代码中，该值是元素的一个属性，它是您在输入（密码）中输入的实际值。

第三，您可以创建类似 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

【讨论】：

哇。谢谢你的详细解释。我已经编码的内容与您发布的内容非常接近。作为这种语言的新手，我在这里和那里遗漏了一些 { } 和一些小细节。我非常感谢您解释了每一位的作用，而不仅仅是答案。这对我帮助很大。非常感谢！
是的，欢迎加入伙伴！我还建议您访问 w3school 网站，了解有关 JavaScript 和 HTML 的更多信息。
虽然您的答案得到了很好的解释，但我们对 Stack Overflow 的问题有一定的期望，其中一些期望是 OP 会提前进行研究并尝试解决自己发帖前。如果我们为不符合这些标准的问题提供答案，我们只会鼓励更多糟糕的问题。这就是为什么我们提供 cmets，而不是上面的答案。
他完全按照教程的方式做了。我对 Javascript 的经验为零，他解释了他在做什么是出于什么原因。我已经搜索了向我建议的所有内容，但我仍然不明白。巴拉特对我的帮助远远超过我的教授所做的。他的代码并没有 100% 解决我的问题，但是在他向我解释之后，在网上进行了更多的搜索和阅读，这更有意义，我能够更好地掌握这个概念。我的任务是这样分配的……在没有先验知识的情况下，使用 Visual Studio 编写 javascript 代码。去吧！
@ScottMarcus 我只是想指导他，而不是不尊重或不遵循任何 stackoverflow 标准。我所做的只是引导他朝着正确的方向前进。