I have a bootstrap modal, where I have few buttons to capture feedback.

I want to call a JS function on click of one of the buttons.

However, on click of the button, the modal just closes without calling the JS Function.

But, if I do the same onclick event on any other element not in the modal, it works fine.

js

<script>
          
   function sayHello() {
        alert("Demo Alert")
   }
</script>

HTML

<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
  class="modal-dialog modal-lg modal-dialog-centered"
  role="document"
>
  <div class="appie-signup-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="appie-signup-box">
            <h3 class="title">How was the Session?</h3>
            <form action="#" id="mood-tracker">
              <div class="row">
                  <div class="input-box">
                    <button type="submit" value="Good" onclick="sayHello()">
                      <i
                        class="fa fa-smile"
                       
                      ></i
                      >Good
                    </button>
                  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Where am I going wrong?