如何清除回显到span标记的内容

Question

so i have an issue with a form made in php. I am echoing an error message in a span tag and i want to clear that message once clicking "clear form" button

This is my php for determining error message when the field hasnt been filled in

<script>
function clearForm(){
    document.getElementById("firstName").value = '';
    document.getElementById("email").value = '';
    document.getElementById("lastName").value = '';
    document.getElementById("subject").value = '';
    document.getElementById("message").value = '';
    document.getElementsByTagName("span").value = "";
}
</script>
      <?php
      $confirm= "";
      $firstName = $lastName = $Email = $Subject = $Message = '';
      if ($_SERVER['REQUEST_METHOD'] == "POST") {
        if (isset($_POST["firstName"]) && $_POST["firstName"]!=null) {$firstName = $_POST['firstName'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["lastName"]) && $_POST["lastName"]!=null) {$lastName = $_POST['lastName'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Email"]) && $_POST["Email"]!=null) {$Email = $_POST['Email'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Subject"]) && $_POST["Subject"]!=null) {$Subject = $_POST['Subject'];} else {
          $confirm ="Please fill it in";
        }
        if (isset($_POST["Message"])&& $_POST["Message"]!=null) {$Message = $_POST['Message'];} else {
          $confirm ="Please fill it in";
        }
      }
      if (isset($_POST["Clearform"])) {
        $confirm= "";
      }

      ?>

And this is how it looks in body

<form name="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']);?>" method="POST">
<p>Your Name: <br>
<input type="text" name="firstName" id="firstName" value="<?php echo $firstName;?>"><span id="confirm"><?php echo $confirm; ?></span></p>
</form>

And the code for the button "Clear form"

<input class="button" type="button" name="Clearform" value="Clear Form" onclick="clearForm();"/>

So i have made this little function that sets the variable $confirm to no content but it doesn't work.

Please help

Answer 1

The problem is in your clearForm() you shouldn't use .value instead, you can use innerHTML, innerText or textContent. To see the difference between them check this link

function clearSpan() {
  let mySpan = document.getElementById('errorSpan');
  mySpan.innerText = '';
}

<span id="errorSpan">This is text to be cleared on button click</span>
<button onclick="clearSpan();">Clear</button>

</div>