为什么我无法读取 null 的属性“样式”？

Question

我有两个带有两个按钮的输入字段（每个字段一个按钮）我想使用带有电话号码的 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">
    ```

Answer 1

我有两个带有两个按钮的输入字段（每个字段一个按钮）我想使用带有电话号码的 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">
    ```

Answer 2

在 div 部分中包含 Id 属性。