Why does HTML say that my variable is not defined?

Question

When I try to use the variable, it says it's not defined (error: "ReferenceError: hufc1 is not defined at HTMLInputElement.onclick", this worked in my old code but not anymore. The code below is the full code to tell you what im trying to do.

<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="https://docs.google.com/document/d/1wZ9WVpkJAjdYVIyGEhgRBaEHulVKetOol17tizUVyLM/edit?usp=sharing" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:

  <input type="text" name="text1">

</p>

<p id="loginpass" style="display: block">PASSWORD:

<input type="password" name="dasnk2">

</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(text1.value,"Harrison",dasnk2.value,"88888888a") onclick=javascript:validate(text1.value,"Isaac",dasnk2.value,"IsABitch") onclick=javascript:validate(text1.value,"Adam",dasnk2.value,"faa222014") onclick=javascript:validate(text1.value,"Kelvin",dasnk2.value,"six921six921") >
<script>
function validate(text1,dasnk2,text3,text4) {

  if (text1 === dasnk2 && text3 === text4) {
      var redirect = document.getElementById('redirect');
      var embed = document.getElementById("embed");

      redirect.style.display = "block";
      embed.style.display = "none";

      setTimeout(function() {
        embed.style.display = "block";
        redirect.style.display = "none";
        loginuser.style.display = "none";
        loginpass.style.display = "none";
        login.style.display = "none";
      }, 5000);
  } else {
    var incorrect = document.getElementById('incorrect');
    incorrect.style.display = "block";
}
}
</script>```

Answer 1

If you want to keep your solution, you can pass value of input tag as parameter to function like below

onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch") 

function validate(text1,dasnk2,text3,text4) {

  if (text1 === dasnk2 && text3 === text4) {
      var redirect = document.getElementById('redirect');
      var embed = document.getElementById("embed");

      redirect.style.display = "block";
      embed.style.display = "none";

      setTimeout(function() {
        embed.style.display = "block";
        redirect.style.display = "none";
        loginuser.style.display = "none";
        loginpass.style.display = "none";
        login.style.display = "none";
      }, 5000);
  } else {
    var incorrect = document.getElementById('incorrect');
    incorrect.style.display = "block";
}
}

<p id="redirect" style="display: none"><font color="32CD32"><em>You have entered the right Log In Infromation and You will be redirected into the document soon.</em></font></p>
<iframe id="embed" style="display: none"src="" height='1080' width='1920'></iframe>
<p id="loginuser" style="display: block">USERNAME:

  <input type="text" name="text1">

</p>

<p id="loginpass" style="display: block">PASSWORD:

<input type="password" name="dasnk2">

</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Harrison",document.getElementsByName("dasnk2")[0].value,"88888888a") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"IsABitch") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Adam",document.getElementsByName("dasnk2")[0].value,"faa222014") onclick=javascript:validate(document.getElementsByName("text1")[0].value,"Kelvin",document.getElementsByName("dasnk2")[0].value,"six921six921") >

Answer 2

You can not get text1.value and dasnk2.value inline. You need move to a javascript function like below.

function validate(){
var name = document.getElementsByName("text1")[0].value;
var pass = document.getElementsByName("dasnk2")[0].value;
if((name == "test" && pass == "test") || (name == "test1" && pass == "test1") || (name == "test2" && pass == "test2") || (name == "test3" && pass == "test3")){
  alert('Valid');
}else{
  alert('Invalid');
}
}

<input type="text" name="text1">

</p>

<p id="loginpass" style="display: block">Password:

  <input type="password" name="dasnk2">

</p>

<input id="login" style="display: block" type="button" value="Log In" name="Submit"
onclick="validate()">