I'm trying to get a functionality for my button control on login allow login once the fields ar-CodePudding

*js code*
//create variable for button control
function Verify(){
var user = document.getElementById["userLogin"]["email"].value;
var pass = document.getElementById["userLogin"]["pass"].value;
var btn= document.getElementById["userLogin"]["Login"].disabled;
if  (user ==""){
btn.disabled();
}
else if (pass ==""){
btn.disabled();
}
else 
    btn.disabled = "false";
}

*css code*

*{
  box-sizing: border-box;
}
head{
text-emphasis-color: rgb(7, 7, 7);
text-align: center;
text-size-adjust: 22px;
}

body{
  background:#98fb98;
  color:#020202;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding:1em;
}
p{
  vertical-align: middle;
}
.container{
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}
.brand{
  text-align: center;
}

.brand span{
  color:#fff;
}

.container{
  box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}

.container{
  padding: 1em;
}
div{
text-align:center;
align-items: center;
}

.email{
  background:#f9feff;
}

.password{
background:#f9feff;
place-self: center;
}
.email{
text-align: center;
}
.password{
text-align: center;
}
.button{
width:100%;
border:#98fb98;
background-color:#4c9a2a;
}
*html code*

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title style ="font-color: #000000;">The Environmentalists</title>
    <p>
    <img src="icon.png" style = "width:1300px; height:400px; margin-left:auto;margin-right:auto;"></img>
    </P>
    <link rel ="stylesheet" href="styling.css">
</head>
<body>
    <div class="container">
        <h1 class="brand" style = "text-color: #000000;"><span>The Environmentalists</span></h1>
        <div class ="container">
        <form id="userLogin">
            <p>
                <label>User</label>
            </p>
            <p>
                <input type="email" name="email" id="email" required>
            </p>
            <p>
                <label>Password</label>
            </p>
            <p>
                <input type="text" name="password" id="password" required>
            </p>
            <p class="full">
                <button type="signupbtn" value ="signup" style=" width:100%">SignUp</button>
                <button type="button" value="Login" style=" width:100%" onclick = "location.href='map.html' ; Verify();" id = "Login" >Login</button>
            </p>
        </form>
        </div>
    </div>

<script >
index.js
</script>
</body>

</html>

CodePudding user response：

btn.disabled() is not a function. You need to put:

btn.disabled = "true";

Also, you need to define your vars differently. Do not do:

var btn = document.getElementById["userLogin"]["Login"].disabled;
etc.

What you should do:

var btn = document.getElementById("Login");
var user = document.getElementById("email").value;
var pass = document.getElementById("pass").value;

CodePudding user response：

First of all disabled is a property and not a function so you should change btn.disabled() to btn.disabled = true. For your reference you can check this:-

<!DOCTYPE html>
<html>
<body>

<button id="myBtn">My Button</button>

<p>Click the button below to disable the button above.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("myBtn").disabled = true;
}
</script>

</body>
</html>

Secondly, you should try to target the HTML elements directly using the associated ID against that particular element. In your case you should replace
```
var btn = document.getElementById["userLogin"]["Login"].disabled
```
by
```
var btn = document.getElementById("Login");
```
and same goes for the other elements that you are trying to target using JavaScript.