Почему не определяется id элемента в модальном окне?

Question

[Staspost]

Есть скрипт, который в зависимости от нажатой кнопки должен выполнить те или иные действия.
В первую очередь всегда нажимается кнопка, по которой открывается модальное окно и в него загружаются начальные данные из БД.
Эта функция отрабатывает корректно. Но затем в открытом модальном окне есть несколько кнопок, клик по которым должен поменять содержание элементов модального окна.
Если при первом нажатии id элемента, по которому кликнули, определяется и выводится через alert, то при последующих нажатиях кнопок внутри модального окна alert открывается пустой и скрипт не отрабатывает.

<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>

Код кнопок в модальном окне:

<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>

Подскажите, плиз, что я делаю не так и как поправить, чтобы id элемента определялся?

Answer 1

[lexchz]

Внутри элемента button находится элемент i, вот он то и есть event.target. А так как id у него нет, и внутри пусто, то и выводится пустой alert, а в let txt идёт пустая строка.

как поправить, чтобы id элемента определялся

event.currentTarget

Comments

[Staspost]

Да, работает, спасибо!