Javascript not working in my asp.net file

Question

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. I tested the code in fiddle with the same javascript, html and css code and that does work. The link to the fiddle code: http://jsfiddle.net/4yxq2L0a/

This is the html code:

<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:

  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:

.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

Answer 1

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. This provides me the answer thanks for the affort