Pblm selection en JS

Bonjour,

J'ai un petit soucis avec mon JS et je n'ai aucune de où il peut bien venir !
HTML

<i class="material-icons h-ico opt-ico toggleModal" data-open="mob__menu">&#xE5D2;</i>

<modal class="mob__menu" data-modal="mob__menu">
                <main class="menu__content">

                </main>
                <div class="filter__black"></div>
            </modal>

JS

var toggle_S = document.querySelectorAll('.toggleModal')

for(var i = 0; i < toggle_S.length; i++) {

    var toggle = toggle_S[i]

    toggle.addEventListener('click', function(e) {

        e.preventDefault()

        var name_attr = 'data-open'
        var attr = this.getAttributeNode(name_attr)
        var modalName = attr.nodeValue

        console.log(modalName)

        var modal = document.querySelector('modal[data-modal="' + modalName + '"]')
        modal.classList.add('open')

    })

}

J'ai essayer en passant le code directement dans la console, mais... je n'ai aucune valeur de toggle_S.

Merci d'avance !