Why is the element id not defined in the modal window?

Question

JavaScript

There is a script that, depending on the button pressed, must perform certain actions.
First of all, the button is always pressed, which opens a modal window and loads the initial data from the database into it.
This function works correctly. But then in the open modal window there are some buttons, clicking on which should change the content of the modal window elements.
If at the first click the id of the clicked element is determined and displayed via alert, then on subsequent clicks of the buttons inside the alert modal window, an empty one opens and the script does not work.

<script>
        function getTxt(event){           
            let var1 = new Array();
            let var2 = new Array();
            let var3;
            let var4;
            let idsound;
            let aud;
            let id=event.target.id;            
            alert(id);
            if(id=='left')
            {
                alert(var1[1]);
                $('#var1').html(var1[1]);
                $('#var2').html(var2[1]);
            }
            else if(id=='right')
            {
                alert(var1[2]);
                $('#var1').html(var1[2]);
                $('#var2').html(var2[2]);
            }
            else if(id=='sound')
            {
                aud.play();
            }
            else
            {
            let txt=event.target.innerHTML;
            $.ajax({  
                    type: 'GET',
                    url: 'card.php',
                    data: {txt : txt},
                    cache: false,
                    contentType: 'application/json',
                    dataType: 'json',
                            success: function(jsondata){
                            var4 = jsondata.var4;
                            var3 = jsondata.var3;
                            var1 = jsondata.var1;
                            var2 = jsondata.var2;
                            idsound = jsondata.idsound;
                            aud = new Audio(idsound);
                            $("#cardModal").modal('show');
                            $('#v4').html(var4);
                            $('#v3').html(var3);
                            $('#var1').html(var1[0]);
                            $('#var2').html(var2[0]);
                            aud.play();
                    },
        error: function(xhr, ajaxOptions, thrownError) {
    alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);}
                });
            }
}
    </script>

Code of buttons in the modal window:

<div class='col-sm-2 text-center'><button class='btn btn-sm' onClick='getTxt(event)' id='sound'><i class='bi bi-music-note-beamed text-center text-primary display-4'></i></button></div>
<div class='col-sm-2'><button class='btn btn-sm' onClick='getTxt(event)' id='left'><i class='bi bi-arrow-left-circle text-center text-primary display-6'></i></button></div>                 
<div class='col-sm-2'><button class='btn btn-sm' onClick='getTxt(event)' id='right'><i class='bi bi-arrow-right-circle text-center text-primary display-6'></i></button></div>

Tell me, pliz, what am I doing wrong and how to fix it so that the element id is determined?

Answer 1

Inside the button element is the i element, which is event.target . And since it doesn’t have an id, and it’s empty inside, an empty alert is displayed, and let txt contains an empty string.

how to fix it so that the id of the element is determined

event.currentTarget