Как привязать событие к span?

Question

[1VAAS1]

Суть в том что хочу привязать звук к определенной категории win или lose ,
но не могу разобраться как получить класс span?,
что я пытался сделать и не сработало
let elem = document.getElementsByClassName('win');
var new Audio('/landing/win.mp3');
audio.play(); }

сам код

var r, o = "",
                            i = void 0 === e ? parseFloat(s) < parseFloat(n) : e >= 0;
                        if (n = void 0 === e ? n : (parseFloat($("#g_balance").html()) + e).toFixed(2), o = void 0 !== e ? e : i ? (parseFloat(n) - parseFloat(s)).toFixed(2) : (parseFloat(s) - parseFloat(n)).toFixed(2), r = '<span class="' + (i ? "win" : "lose") + '">' + (i ? "+" : "-") + Math.abs(o) + ' <i class="fa fa-ruble-sign"></i></span>', !isNaN(parseFloat(o)) && 0 !== parseFloat(o)) {
                            var a = $('<span class="balance-animated" style="display: none;">' + r + "</span>");
                            $("#g_balance").html(n + " руб.").append(a), a.fadeIn("fast", (function() {
                                a.animate({
                                    top: "80%"
                                }, 800), void 0 !== t && t(o), setTimeout((function() {
                                    a.fadeOut("slow")
                                }), 600)
                            }))
                        }
                    }
                    s = n
                };

Comments

[Steppp]

Не используй это старье
let elem = document.getElementsByClassName('win');
var new Audio('/landing/win.mp3');

Это уже давно используют

И где ты пытаешься получить класс? Вообще если ты вставляешь код через js, тебе надо получать класс после того, как он от рисуется на странице

[Steppp]

И еще момент, ты же используешь Jq, зачем тебеdocument.getElementsByClassName!??? Используй Jq $('.win')

Answer 1

[Il'ia Kartovitskii]

var classArr = document.getElementById('elemID').className.split(/\s+/);
for (var i = 0; i < classArr.length; i++) {
    if (classArr[i] == 'win') {
        /* 
        Тут твой код, например: 
        var audio = new Audio('/landing/win.mp3');
        audio.play(); 
        */
    }
}

То же самое, только на jQuery:

var classArr = $('#elemID').attr('class').split(/\s+/);
$.each(classArr, function(index, itm) {
    if (itm == 'win') {
        // какой-то код
    }
});

P.S. Не забудь добавить id = 'elemID' к тегу span и помни, что ID элементов не должен повторяться

Comments

[1VAAS1]

а как добавить id если на выбор идет класс к span ?

<span class="'+(lesser ? 'win' : 'lose')+'">'+ (lesser ? '+' : '-') + Math.abs(val) + ' <i class="fa fa-ruble-sign"></i></span>';

если присвою id около класса то срабатывает в обоих случаях

[1VAAS1]

или же таким способо присвоить?
$(document).ready(function(){
3
span.id = "elemID'";

[Il'ia Kartovitskii]

'<span id="elemID" class="'+(lesser ? 'win' : 'lose')+'">'+ (lesser ? '+' : '-') + Math.abs(val) + ' <i class="fa fa-ruble-sign"></i></span>';

[1VAAS1]

Сам код который вышел app.js 1

var classArr = document.getElementById('elemID').className.split(/\s+/);
for (var i = 0; i < classArr.length; i++) {
    if (classArr[i] == 'win') {
         
        var audio = new Audio('/landing/win.mp3');
        audio.play(); 
        
    }
}
	
	
                if(specificValue !== undefined) val = specificValue;
                else if(lesser) val = (parseFloat(data) - parseFloat(prev)).toFixed(2);
                else val = (parseFloat(prev) - parseFloat(data)).toFixed(2);
                c = '<span id="elemID" class="'+(lesser ? 'win' : 'lose')+'">'+ (lesser ? '+' : '-') + Math.abs(val) + ' <i class="fa fa-ruble-sign"></i></span>';

                if(!isNaN(parseFloat(val)) && parseFloat(val) !== 0) {
                    let a = $('<span class="balance-animated" style="display: none;">' + c + '</span>');
                    $('#g_balance').html(data + ' руб.').append(a);
                    a.fadeIn('fast', function () {
                        a.animate({'top': '80%'}, 800);
                        if(callback !== undefined) callback(val);
                        setTimeout(function () {
                            a.fadeOut('slow');
                        }, 600);
                    });
                }
            }
            prev = data;
        };

APP JS 2

var classArr = document.getElementById('elemID').className.split(/\s+/);
for (var i = 0; i < classArr.length; i++) {
    if (classArr[i] == 'lose') {
         
        var audio = new Audio('/landing/win.mp3');
        audio.play(); 
        
    }
}


						var r, o = "",
                            i = void 0 === e ? parseFloat(s) < parseFloat(n) : e >= 0;
                        if (n = void 0 === e ? n : (parseFloat($("#g_balance").html()) + e).toFixed(2), o = void 0 !== e ? e : i ? (parseFloat(n) - parseFloat(s)).toFixed(2) : (parseFloat(s) - parseFloat(n)).toFixed(2), r = '<span id="elemID" class="' + (i ? "win" : "lose") + '">' + (i ? "+" : "-") + Math.abs(o) + ' <i class="fa fa-ruble-sign"></i></span>', !isNaN(parseFloat(o)) && 0 !== parseFloat(o)) {
                            var a = $('<span class="balance-animated" style="display: none;">' + r + "</span>");
                            $("#g_balance").html(n + " руб.").append(a), a.fadeIn("fast", (function() {
                                a.animate({
                                    top: "80%"
                                }, 800), void 0 !== t && t(o), setTimeout((function() {
                                    a.fadeOut("slow")
                                }), 600)
                            }))
                        }
                    }
                    s = n
                };
                void 0 === e ? $.get("/api/money", (function(t) {
                    n(t)
                })) : n(s)
            }
        };

Il'ia Kartovitskii, я так делал , загрузил все это дело пишет Uncaught TypeError: Cannot read property 'className' of null , как с тобой можно связаться ? есть телеграмм ?

[Il'ia Kartovitskii]

1VAAS1, у тебя в проекте явно используется jQuery, используй второй вариант из тех, что я предлагал выше

[1VAAS1]

Il'ia Kartovitskii, сейчас затестировал второй вариант Cannot read property 'split' of undefined

[Il'ia Kartovitskii]

1VAAS1, почему ты выполняешь функцию до того, как элемент у тебя в принципе в DOM не появился?

[1VAAS1]

Il'ia Kartovitskii, я пробовал размещать в конце , звук не срабатывает , если же окно искусственно вывести и дать запрос в консоль то все работает как надо

[Il'ia Kartovitskii]

1VAAS1, изучай