why do i get Cannot read property 'style' of null?

Question

i have two inputs fields with two buttons (one button for each field) i want to Authenticate with Firebase with a Phone Number Using JavaScript everything works but i want to hide the input fields based on the button pressed so here is my code

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

and here is the script

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);
          });
      }

because of document.getElementById("phone-input").style.display = "none"; i get and error login.php:99 Uncaught TypeError: Cannot read property 'style' of null

i have looked on the others questions and answers regarding this issue but nothing works for me

here is my 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

i have two inputs fields with two buttons (one button for each field) i want to Authenticate with Firebase with a Phone Number Using JavaScript everything works but i want to hide the input fields based on the button pressed so here is my code

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

and here is the script

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);
          });
      }

because of document.getElementById("phone-input").style.display = "none"; i get and error login.php:99 Uncaught TypeError: Cannot read property 'style' of null

i have looked on the others questions and answers regarding this issue but nothing works for me

here is my 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

Include Id attribute in div section.