[英]Javascript not working in my asp.net file
I am trying to get a login navigation with radio buttons. 我正在尝试使用单选按钮进行登录导航。 So when I click on a radion button it will show up a other form.
因此,当我单击单选按钮时,它将显示另一种形式。 But somehow the javascript code that I implemented doesn't seem to work.
但是以某种方式,我实现的javascript代码似乎无法正常工作。 I tested the code in fiddle with the same javascript, html and css code and that does work.
我用相同的javascript,html和css代码测试了小提琴中的代码,并且确实有效。 The link to the fiddle code: http://jsfiddle.net/4yxq2L0a/
小提琴代码的链接: http : //jsfiddle.net/4yxq2L0a/
This is the html code: 这是html代码:
<link rel = "stylesheet" href = "style.css">
<form id="Login" class="Loginform" method="post">
<label class="inlog">
<input class="invoertype" type="text" required />
<div class="invoertext">Email</div>
</label>
<label class="inlog">
<input class="invoertype" type="password" required />
<div class="invoertext">Password</div>
</label>
</form>
<form id="Signin" class="Loginform" method="post">
<label class="inlog">
<input class="invoertype" type="text" required />
<div class="invoertext">Email</div>
</label>
<label class="inlog">
<input class="invoertype" type="password" required />
<div class="invoertext">Password</div>
</label>
</form>
<form id="Reset" class="Loginform" method="post">
<label class="inlog">
<input class="invoertype" type="text" required />
<div class="invoertext">Email</div>
</label>
</form>
<form class="Navigatieinlog">
<input class="alleinput" id='signin' name='radios' type='radio' value='signin'>
<label class="lblnavigatie" for='signin'>Sign in</label>
<input class="alleinput"id='signup' name='radios' type='radio' value='signup'>
<label class="lblnavigatie" for='signup'>Sign up</label>
<input id='reset' class="alleinput" name='radios' type='radio' value='reset'>
<label class="lblnavigatie" for='reset'>Reset</label>
</form>
This is the javascript code I am using: 这是我正在使用的javascript代码:
var radios = document.getElementsByName("radios");
var Login = document.getElementById("Login");
var Signin = document.getElementById("Signin");
var Reset = document.getElementById("Reset");
Login.style.display = 'block'; // show
Signin.style.display = 'none'; // hide
Reset.style.display = 'none'; // hide
for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
var val = this.value;
if (val == 'signin') {
Login.style.display = 'block';
Signin.style.display = 'none';
Reset.style.display = 'none';
}
else if (val == 'signup') {
Login.style.display = 'none';
Signin.style.display = 'block';
Reset.style.display = 'none';
}
else if (val == 'reset') {
Login.style.display = 'none';
Signin.style.display = 'none';
Reset.style.display = 'block';
}
}
}
and just to be sure css code: 并确保CSS代码:
.Loginform {
text-align: center;
position: relative;
top: 35vh;
}
.inlog {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
}
.inlog .invoertext {
color: white;
cursor: text;
font-size: 20px;
line-height: 20px;
text-transform: uppercase;
-moz-transform: translateY(-34px);
-ms-transform: translateY(-34px);
-webkit-transform: translateY(-34px);
transform: translateY(-34px);
transition: all 0.3s;
}
.inlog .invoertype {
background-color: transparent;
border: 0;
border-bottom: 2px solid white;
color: white;
font-size: 36px;
letter-spacing: -1px;
outline: 0;
padding: 5px 20px;
text-align: center;
transition: all 0.3s;
width: 200px;
}
.inlog .invoertype:focus {
max-width: 100%;
width: 400px;
}
.inlog .invoertype:focus + .invoertext {
color: whitesmoke;
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
.inlog .invoertype:valid + .invoertext {
font-size: 13px;
-moz-transform: translateY(-74px);
-ms-transform: translateY(-74px);
-webkit-transform: translateY(-74px);
transform: translateY(-74px);
}
.Navigatieinlog {
width: 450px;
height: 30px;
margin: -185px -225px;
position: absolute;
left: 50%;
top: 50%;
}
.alleinput[type=radio]{display:none;}
.lblnavigatie {
cursor: pointer;
display: inline-block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
}
.lblnavigatie[for="signin"] { margin-right: 20px; }
.lblnavigatie[for="reset"] { float: right; }
.lblnavigatie[type=radio]:checked + .lblnavigatie { opacity: 1; }
These code I did copy 1 on 1 from the fiddle code I made where it does work. 这些代码是我在工作位置制作的小提琴代码中一对一复制的。 I hope to know what the reason is for the code not to work.
我希望知道导致代码无法正常工作的原因。
In advance thanks for you help 预先感谢您的帮助
I just found the answer in another link. 我刚刚在另一个链接中找到了答案。
So for anyone who strumbles across the same problem read this link: JSFiddle code not working in my own page . 因此,对于遇到相同问题的任何人,请阅读以下链接: JSFiddle代码在我自己的页面中不起作用 。 This provides me the answer thanks for the affort
这为我提供了答案,感谢您的努力
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.