我正在嘗試為我的登錄按鈕控制元件獲取功能，一旦填寫了欄位，就允許登錄-有解無憂

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

uj5u.com熱心網友回復：

btn.disabled() 不是函式。你需要把：

btn.disabled = "true";

此外，您需要以不同的方式定義您的變數。不要做：

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

你應該做什么：

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

uj5u.com熱心網友回復：

首先，disabled 是一個屬性而不是一個函式，因此您應該將 btn.disabled() 更改為 btn.disabled = true。供您參考，您可以檢查一下：-

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

其次，您應該嘗試使用針對特定元素的關聯 ID 直接定位 HTML 元素。在你的情況下，你應該更換
```
var btn = document.getElementById["userLogin"]["Login"].disabled
```
經過
```
var btn = document.getElementById("Login");
```
您嘗試使用 JavaScript 定位的其他元素也是如此。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337337.html

標籤：javascript html css

上一篇：withposition:固定帖子在選單下

下一篇：HTML邊框未顯示在我的表單中