Using A Clear-Filed Button To Clear Some Fields In A Form, But Not All

I have a multipart form which includes 'Name', 'Email' and 'Phone Number' fields.

Note: The phone number 'field' is actually made up of 10 individual 'single-digit' fields.

I want to provide the user with a 'Clear Phone Number" button to reset the phone number fields if they accidentally enter the number incorrectly and need to start over.

However, I do not want the button to clear all of the form data they have already entered, just the collective phone number fields.

I have entered the code I am using below and have tested it. But so far the 'Clear Phone Number' button will only clear the entire form.

Any help in tweaking this code would greatly be appreciated.

Thank you, Maddison

HTML

<!DOCTYPE html>

<head>

</head>

<body>


<!-- START FORM -->

<form action="/formHandler.php" method="post" enctype="multipart/form-data">


<!-- START CONTACT INFORMATION -->

Name: <input type="text" id="userName" name="userName" class="userName_Field" placeholder=" 
Name"><br><br>


Email: <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" 
placeholder=" Email"><br><br>


<!-- ////////// Start Phone Number ////////// -->


Phone Number:

<br><br>


<!-- Start userPhone Fields -->

<div class="phoneField_Wrapper">

(

<input type="text" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" 
maxlength="1" placeholder="0">

)&nbsp

<input type="text" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" 
maxlength="1" placeholder="0">

&nbsp-&nbsp

<input type="text" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" 
maxlength="1" placeholder="0">

<input type="text" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" 
maxlength="1" placeholder="0">

</div>


<br><br>

<!-- End userPhone Fields -->


<!-- Start Clear Fields Button -->

<div><button>Clear Phone Number</button></div>

<!-- End Clear Fields Button -->


<br><br>


<!-- Start Advance Next Field Script -->

<script>

var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0];
phoneField_Wrapper.onkeyup = function(e) {
var target = e.srcElement;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() == "input") {
next.focus();
break;
}
}
}
}     

</script>

<!-- End Advance Next Field Script -->



<!-- Start Clear Fields Button Script -->

<script>

let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('input');
btnClear.addEventListener('click', () => {
inputs.forEach(input =>  input.value = '');
});

</script>

<!-- End Clear Fields Button Script -->


<!-- ////////// End Phone Number ////////// -->




<!-- Start Submit Button -->

<input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" 
value="Submit Form"></div>

<!-- End Submit Button -->


</form>
</body>
</html>

CSS

.phoneField {width: 14px; text-align: center;}

Solution

You need to only query your phone field elements for the clear phone field button event listener.

This should work for you let inputs = document.querySelectorAll('.phoneField');

let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField');
btnClear.addEventListener('click', () => {
  inputs.forEach(input => input.value = '');
});

var phoneField_Wrapper = document.getElementsByClassName("phoneField_Wrapper")[0];
phoneField_Wrapper.onkeyup = function(e) {
  var target = e.target;
  var maxLength = parseInt(target.attributes["maxlength"].value, 10);
  var myLength = target.value.length;
  if (myLength >= maxLength) {
    var next = target;
    while (next = next.nextElementSibling) {
      if (next == null)
        break;
      if (next.tagName.toLowerCase() == "input") {
        next.focus();
        break;
      }
    }
  }
}

<!DOCTYPE html>

<head>

</head>

<body>


  <!-- START FORM -->

  <form action="/formHandler.php" method="post" enctype="multipart/form-data">


    <!-- START CONTACT INFORMATION -->

    Name: <input type="text" id="userName" name="userName" class="userName_Field" placeholder=" 
Name"><br><br> Email: <input type="email" id="userEmail" name="userEmail" class="userEmail_Field" placeholder=" Email"><br><br>


    <!-- ////////// Start Phone Number ////////// -->


    Phone Number:

    <br><br>


    <!-- Start userPhone Fields -->

    <div class="phoneField_Wrapper">

      (

      <input type="text" size='1' id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" maxlength="1" placeholder="0"> )&nbsp

      <input type="text" size='1' id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" maxlength="1" placeholder="0"> &nbsp-&nbsp

      <input type="text" size='1' id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" maxlength="1" placeholder="0">

      <input type="text" size='1' id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" maxlength="1" placeholder="0">

    </div>


    <br><br>

    <!-- End userPhone Fields -->


    <!-- Start Clear Fields Button -->

    <div><button type="button">Clear Phone Number</button></div>

    <!-- End Clear Fields Button -->


    <br><br>


    <!-- Start Advance Next Field Script -->

    <script>
    </script>

    <!-- End Advance Next Field Script -->



    <!-- Start Clear Fields Button Script -->

    <script>
    </script>

    <!-- End Clear Fields Button Script -->


    <!-- ////////// End Phone Number ////////// -->




    <!-- Start Submit Button -->

    <input type="submit" id="submitForm_Button" name="submitForm_Button" class="submitForm_Button" value="Submit Form"></div>

    <!-- End Submit Button -->


  </form>
</body>

</html>