CODEWITHSUNDEEP
javascripthtmlcssif-statement
Vinicius Carvalho
Vinicius Carvalho

Reputation: 11

Where are the error?

When i click in the button, it dont work, and I am going to "logado.html" and I dont receive the alert. I need help, why do I receive this message? I need that when I click in the button "Login" the js verify if "Login" or "Loginsenha" is null.

HTML: 

<!DOCTYPE html>

<html>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <meta charset="utf-8">
    <head>
        <title>Login uCar</title>
    </head>


    <body>
        <div class="loginbox">
            <img src="img/RA.png" class="avatar">
            <h1>Login</h1>
            <div class="espaçobugado"></div>
            <form>
                <p>RA</p>
                <div class="espaçobugado2"></div>
                <input type="number" name="username" value="" id="login">
                <p>Senha</p>
                <div class="espaçobugado2"></div>    
                <input type="password" name="password" placeholder="" id="loginsenha">
                <input type="submit" name="login" value="Login" onclick="myLogin()"><br>
                <a href="">Perdeu sua senha?</a><br>
                <div class="espaçobugado"></div>
                <a href="">Não tem uma conta?</a>
            </form>
        </div>
        <script type="text/javascript" src="js/login.js"></script>

    </body>

</html>

JS: 

var x = document.getElementById("login").value;
var y = document.getElementById("loginsenha").value;

function myLogin() {

    if (x = "") {
        alert("Coloque seu RA por favor.")
    }
    else if (y = "") {
            alert("Coloque sua senha por favor.")
        }
        else {
            window.open("logado.html")
        }
}

Upvotes: 0

Views: 44

Answers (3)

Ehsan
Ehsan

Reputation: 12959

1) use == no =

2) get x value and y value inside the function no out the function.

function myLogin() {

  var x = document.getElementById("login").value;
  var y = document.getElementById("loginsenha").value;

  if (x == "") {
    alert("Coloque seu RA por favor.");
  }

  else if (y == "") {
    alert("Coloque sua senha por favor.");
  }

  else {
    window.open("logado.html")
  }

}


function myLogin() {
      var x = document.getElementById("login").value;
      var y = document.getElementById("loginsenha").value;

  if (x == "") {
    alert("Coloque seu RA por favor.");
  }

  else if (y == "") {
    alert("Coloque sua senha por favor.");
  }

  else {
    window.open("logado.html")
  }

}
<div class="loginbox">
  <img src="img/RA.png" class="avatar">
  <h1>Login</h1>
  <div class="espaçobugado"></div>
  <form>
    <p>RA</p>
    <div class="espaçobugado2"></div>
    <input type="number" name="username" value="" id="login">
    <p>Senha</p>
    <div class="espaçobugado2"></div>    
    <input type="password" name="password" placeholder="" id="loginsenha">
    <input type="submit" name="login" value="Login" onclick="myLogin()"><br>
    <a href="">Perdeu sua senha?</a><br>
    <div class="espaçobugado"></div>
    <a href="">Não tem uma conta?</a>
  </form>
</div>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Update your function.

Keep your x, y declarations inside function, else it will always have only empty values as its declared when the script runs. Wee need the current values at each button click. So we need to keep the declaration in the function. Changed if/else statement.

x="" is an assignment statement does not return false ever.

Instead use x === "" or as i suggested in the answer

function myLogin() {
  var x = document.getElementById("login").value;
  var y = document.getElementById("loginsenha").value;

  if (!x.trim()) {
    alert("Coloque seu RA por favor.")
  } else if (!y.trim()) {
    alert("Coloque sua senha por favor.")
  } else {
    window.open("logado.html")
  }
}


<!DOCTYPE html>

<html>
<link rel="stylesheet" type="text/css" href="css/login.css">
<meta charset="utf-8">

<head>
  <title>Login uCar</title>
</head>


<body>
  <div class="loginbox">
    <img src="img/RA.png" class="avatar">
    <h1>Login</h1>
    <div class="espaçobugado"></div>
    <form>
      <p>RA</p>
      <div class="espaçobugado2"></div>
      <input type="number" name="username" value="" id="login">
      <p>Senha</p>
      <div class="espaçobugado2"></div>
      <input type="password" name="password" placeholder="" id="loginsenha">
      <input type="button" name="login" value="Login" onclick="myLogin()"><br>
      <a href="">Perdeu sua senha?</a><br>
      <div class="espaçobugado"></div>
      <a href="">Não tem uma conta?</a>
    </form>
  </div>
  <script type="text/javascript" src="js/login.js"></script>


  <script>
    function myLogin() {
      var x = document.getElementById("login").value;
      var y = document.getElementById("loginsenha").value;

      if (!x.trim()) {
        alert("Coloque seu RA por favor.")
      } else if (!y.trim()) {
        alert("Coloque sua senha por favor.")
      } else {
        window.open("logado.html")
      }
    }
  </script>
</body>

</html>

Upvotes: 1

Brett Commandeur
Brett Commandeur

Reputation: 590

Your if statement is using assignment, not conditional logic. For example,

x = ""

should say

x === ""

Your current logic is being evaluated as follows:

if (x = "") ~> if ("") ~> if (false)

So your conditions are never true, and else is always called.

Upvotes: 1

Related Questions