显示引导模式时，function 运行多次。 香草 js

Question

I have a button that shows a bootstrap modal, it has an onclick attribute set to a function,

The button:

<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}"
   type="button" data-bs-toggle="modal" data-bs-target="#grade-modal" 
   onClick="getEnrolledSubjects(this.getAttribute('data-id'))">
    <i class="fas fa-plus"></i>
</span>

My javascript function:

function getEnrolledSubjects(id){
    var modal = document.getElementById('grade-modal')
    modal.addEventListener('shown.bs.modal', function(){
        console.log(id)
    }
}

at first, it looks fine because it will only log the id once, but when I close the modal and open it again, it will log 2 times, then 3 times, and so on... it goes incrementally. how can i fix this?

Answer 1

as Bootstrap Modal documentation

You can Use event.relatedTarget :

<span style="color:blue;margin-left: 2rem;" data-id="{{student.id}}" id="{{student.id}}" type="button" data-bs-toggle="modal" data-bs-target="#grade-modal">
    <i class="fas fa-plus"></i>
</span>

without onClick event

const modal = document.getElementById('grade-modal')
modal.addEventListener('shown.bs.modal', function(event){
    const button = event.relatedTarget
    const id = button.getAttribute('data-id');
    console.log(id)
})