Custom swal button not firing their specific function

Question

I am using vue-swal to display a dialog to the user. I have modified the usual swal in able to meet my desired functions and flow. While modifying, I have encountered error. I have 3 buttons in my swal and each button has specific functionality that need to be fired once a button was clicked. However, when I click the button, the handler function is not executed. I've tried to put a value on each button and used this as a variable to my condition. What did I miss?

Here is swal.

And my code

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

Answer 1

Got an Idea to @jom

And now its working. Here what I used also from the documentation of Swal

Swal Multiple Button

Here is now my code.

swal({
title: `Checkpoint!`,
html: `Some Text here.
       <br> <br> <b>
      Some text here?
           </b>
       <br> <br> <br> 
      <button type="button" class="btn btn-yes swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
      <button type="button" class="btn btn-no swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
      <button type="button" class="btn btn-cancel swl-cstm-btn-cancel" >Cancel</button>`,
showCancelButton: false,
showConfirmButton: false,
onBeforeOpen: () => {
     const yes = document.querySelector('.btn-yes')
     const no = document.querySelector('.btn-no')
     const cancel = document.querySelector('.btn-cancel')

     yes.addEventListener('click', () => {
         console.log('Yes was Cliked.')
     })

     no.addEventListener('click', () => {
         console.log('no was Cliked.')
     })

     cancel.addEventListener('click', () => {
         console.log('cancel was Cliked.')
     })
}
})