Why do both buttons call my function?

I have a form:
<modal>
  <form id="bingo-settings-list">
  [...]
    <button class="addGamePickerSelector-Button">Add game</button>

    <div>
      <button class="bingo-settings-submit-button" type="submit">Use settings</button>
      <button>Cancel</button>
    </div>
  </form>
</modal>

and Javascript:
document.querySelector("#bingo-settings-list").addEventListener("submit", function(){
        event.preventDefault();
        //createBingoTable();
        console.log("im submitted")
    })


My issue is that all the buttons for some reason call and activate the event that should only run on submit
Only the submit button has 'type="submit"', I also tried adding "submitter" as an attribute altho I don't think that's an actual thing
Was this page helpful?