[英]Why do I get “Uncaught TypeError: Cannot read property 'style' of null” of an element in an array?
[英]why do i get Cannot read property 'style' of null?
我有兩個帶有兩個按鈕的輸入字段(每個字段一個按鈕)我想使用帶有電話號碼的 Firebase 進行身份驗證使用 JavaScript 一切正常,但我想根據按下的按鈕隱藏輸入字段所以這是我的代碼
<div class="phone-input">
<h5 class="card-title text-center">
Verificarea ......
</h5>
<div class="form-group">
<!-- Add inputs for "phoneNumber" -->
<input type="tel" id="phoneNumber" class="form-control size text-center" name="phoneNumber" placeholder="07xxxxxxxx">
</div>
<div class="form-group text-center">
<!-- Add two buttons to submit the inputs -->
<button id="sign-in-button" class="btn btn-primary col-6 pt-3 pb-3" onclick="submitPhoneNumberAuth()">
VERIFICA TELEFON
</button>
</div>
</div>
<div class="code-input">
<div class="form-group">
<!-- Add inputs for "code" -->
<input type="text" id="code" class="form-control size text-center" name="code" placeholder="codul primit prin SMS">
</div>
<div class="form-group text-center">
<!-- Add two buttons to submit the inputs -->
<button id="confirm-code" class="btn btn-success col-6 pt-3 pb-3" onclick="submitPhoneNumberAuthCode()">
VERIFICA COD
</button>
</div>
</div>
這是腳本
function submitPhoneNumberAuth() {
document.getElementById("phone-input").style.display = "none";
var phoneNumber = document.getElementById("phoneNumber").value;
var newNumber = "+4"+phoneNumber;
var appVerifier = window.recaptchaVerifier;
firebase
.auth()
.signInWithPhoneNumber(newNumber, appVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
})
.catch(function(error) {
console.log(error);
});
}
因為document.getElementById("phone-input").style.display = "none";
我得到並錯誤login.php:99 Uncaught TypeError: Cannot read property 'style' of null
我已經查看了有關此問題的其他問題和答案,但對我沒有任何幫助
這是我的 header
script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="includes/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```
我有兩個帶有兩個按鈕的輸入字段(每個字段一個按鈕)我想使用帶有電話號碼的 Firebase 進行身份驗證使用 JavaScript 一切正常,但我想根據按下的按鈕隱藏輸入字段所以這是我的代碼
<div class="phone-input">
<h5 class="card-title text-center">
Verificarea ......
</h5>
<div class="form-group">
<!-- Add inputs for "phoneNumber" -->
<input type="tel" id="phoneNumber" class="form-control size text-center" name="phoneNumber" placeholder="07xxxxxxxx">
</div>
<div class="form-group text-center">
<!-- Add two buttons to submit the inputs -->
<button id="sign-in-button" class="btn btn-primary col-6 pt-3 pb-3" onclick="submitPhoneNumberAuth()">
VERIFICA TELEFON
</button>
</div>
</div>
<div class="code-input">
<div class="form-group">
<!-- Add inputs for "code" -->
<input type="text" id="code" class="form-control size text-center" name="code" placeholder="codul primit prin SMS">
</div>
<div class="form-group text-center">
<!-- Add two buttons to submit the inputs -->
<button id="confirm-code" class="btn btn-success col-6 pt-3 pb-3" onclick="submitPhoneNumberAuthCode()">
VERIFICA COD
</button>
</div>
</div>
這是腳本
function submitPhoneNumberAuth() {
document.getElementById("phone-input").style.display = "none";
var phoneNumber = document.getElementById("phoneNumber").value;
var newNumber = "+4"+phoneNumber;
var appVerifier = window.recaptchaVerifier;
firebase
.auth()
.signInWithPhoneNumber(newNumber, appVerifier)
.then(function(confirmationResult) {
window.confirmationResult = confirmationResult;
})
.catch(function(error) {
console.log(error);
});
}
因為document.getElementById("phone-input").style.display = "none";
我得到並錯誤login.php:99 Uncaught TypeError: Cannot read property 'style' of null
我已經查看了有關此問題的其他問題和答案,但對我沒有任何幫助
這是我的 header
script type="text/javascript"> (function() { var css = document.createElement('link'); css.href = 'https://use.fontawesome.com/releases/v5.1.0/css/all.css'; css.rel = 'stylesheet'; css.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(css); })(); </script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="includes/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
```
在 div 部分中包含 Id 屬性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.