JavaScript和OnClick事件，使类隐藏
JavaScript and OnClick Events, making classes hidden
我正试图使一个"计算器"作为实践，因为我正在学习Javascript。基本上，用户设置一个密码。设置密码后，用户需要再次输入密码。如果密码匹配，那么将出现一个计算器，密码框将消失。代码工作直到重新输入密码，我无法通过这部分，我被难住了!任何建议都将不胜感激。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
var NewPwd = document.getElementById(pwd2);
if (Newpwd == pwd) {
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick= DisplayCalc(pwd2)>
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>
我的控制台说'Newpwd'在比较时没有定义(Newpwd == pwd)。看看你的源代码，你需要大写'Newpwd '中的'P'
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
var NewPwd = document.getElementById(pwd2).value;
if (NewPwd == pwd) {
document.getElementsByClassName('NotVisibleClass')[0].style.visibility = 'visible';
document.getElementsByClassName('VisibleClass')[0].style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick="DisplayCalc('pwd2')">
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>
在以下部分:
if (Newpwd == pwd) {
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
change 'Newpwd == pwd' to 'NewPwd.value == pwd'
你的代码仍然需要一些css相关的修改。
我建议你开始使用一些开发工具(如Chrome浏览器的开发工具)。 只需在所需页面上按F12，在Google Chrome中，打开开发人员工具页面，并探索您的代码。正如Justin H所提到的，在if语句中使用的变量'NewPwd'中的' p '有一个小写的p . JavaScript是一种大小写敏感的语言，因此Newpwd是未定义的。把if语句中的P大写，你就可以重新开始运行了。此外，您只是通过ID获取文档元素，这不会返回它的值。它将返回一个对象。因此，您还需要修改变量NewPwd的定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var pwd = prompt("Please enter your FAB password here", "");
function DisplayCalc(pwd2) {
//Variable NewPwd with capital 'P'
var NewPwd = document.getElementById(pwd2).value;
//Use of Variable NewPwd used without capitalization of 'P'
if (Newpwd == pwd) { //Newpwd == pwd returns undefined
document.getElementsByClassName(NotVisibleClass).style.visibility = 'visible';
document.getElementsByClassName(VisibleClass).style.visibility = 'hidden';
}
else {
alert("Wrong Password Twinkle Toes!!");
}
}
</script>
<style>
/* Need to style title to have a different color for every letter*/
.Red{
color: #f00;
}
.Orange{
color: orange;
}
.Yellow{
color: yellow;
}
.Green{
color: green;
}
.Blue{
color: blue;
}
.Purple{
color: purple;
}
/*Need to have the background change colors*/
.ResDivBy7{
background-color: red;
}
.ResDivBy6{
background-color: orange;
}
.ResDivBy5{
background-color: yellow;
}
.ResDivBy4{
background-color: green;
}
.ResDivBy3{
background-color: blue;
}
.ResDivBy2{
background-color: purple;
}
/*Need to hide elements */
.NotVisibleClass{
visibility: hidden;
}
/*Need to show elements*/
.VisibleClass{
visibility: visible;
}
</style>
<title>Secret Rainbow Calculator!!!</title>
</head>
<body>
<div class="header">
<h1>
<span class="Red">S</span><span class="Orange">E</span><span class="Yellow">C</span><span class="Green">R</span><span class="Blue">E</span><span class="Purple">T</span>
<span class="Red">R</span><span class="Orange">A</span><span class="Yellow">I</span><span class="Green">N</span><span class="Blue">B</span><span class="Purple">O</span><span class="Red">W</span>
<span class="Orange">C</span><span class="Yellow">A</span><span class="Green">L</span><span class="Blue">C</span><span class="Purple">U</span><span class="Red">L</span><span class="Orange">A</span><span class="Yellow">T</span><span class="Green">O</span><span class="Blue">R</span>
</h1>
</div>
<div class="VisibleClass">
<form action="">
<fieldset>
<label>Please Enter Your FABULOUS Password!</label>
<input type="password"
id="pwd2" />
<button type="button" onClick= DisplayCalc(pwd2)>
Click Me When Done!</button>
</fieldset>
</form>
</div>
<div class="NotVisibleClass">
<form action="">
<fieldset>
<input type="text" id="calcScreen" readonly="readonly"/>
<br>
<button type="button"> 1 </button>
<button type="button"> 2 </button>
<button type="button"> 3 </button>
<button type="button"> 4 </button>
<br>
<button type="button"> 5 </button>
<button type="button"> 6 </button>
<button type="button"> 7 </button>
<button type="button"> 8 </button>
<br>
<button type="button"> Enter </button>
<button type="button"> 0 </button>
<button type="button"> 9 </button>
<button type="button"> Clear </button>
<br>
<button type="button"> + </button>
<button type="button"> - </button>
<button type="button"> * </button>
<button type="button"> / </button>
</fieldset>
</form>
</div>
</body>
</html>
相关文章：
- javascript.点击隐藏事件故障
- Safari扩展中是否有任何Safari Popover隐藏事件
- 如何使用 jQuery 显示/隐藏事件重新加载 jQuery 幻灯片
- 更改节目隐藏事件
- 如何使用jquery延迟隐藏事件
- Twitter引导程序模式隐藏事件只触发一次
- 单击特定列表项后，取消引导程序下拉菜单上的隐藏事件
- 为什么我的jQuery隐藏事件没有启动，我的Backbone子视图没有渲染
- Android中的键盘隐藏事件
- Fullcalendar只在月份视图中隐藏事件
- 启动-选择隐藏事件未触发
- 停止隐藏事件
- qTip2 html内容删除时隐藏事件触发
- 移动safari中的页面隐藏事件
- 带显示和隐藏事件的3个嵌套可折叠元素
- 如何检测键盘显示/隐藏事件发生在Android浏览器上?
- 当通过MVC分部视图注入时，显示的引导模态和隐藏事件不会触发
- Jquery UI可分类的垃圾箱显示和隐藏事件
- 防止从JavaScript触发代码隐藏事件
- 我们可以绑定隐藏事件吗或者jquery有一个onhide事件事件
