Convertir un code jQuery en JavaScript vanilla

**oitsuki** · 28/02/2021, 11h47

Bonjour,

J'essaye de convertir ce code jqury en pure js, je suis nouveau dans le domaine
Je me demande aussis'il faut pas utiliser eventlistener ?
Merci pour votre aide

jquery :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
        $(function () {
            if ($('form[name="sql"] input[type="checkbox"][name="masterblaster"]').length > 0) {
                $('form[name="sql"] input[type="checkbox"][name="masterblaster"]').click(function () {
                    $('form[name="sql"] input[type="checkbox"][name="id[]"]').prop('checked', $('form[name="sql"] input[type="checkbox"][name="masterblaster"]').prop('checked'));
                });
            }
 
            if ($('#sqlActionsMenu').val() == 'utf8') {
                $('.runUtf8').show();
            }
 
            $('#sqlActionsMenu').change(function () {
                var selected = $(this).val();
 
                if (selected == 'utf8') {
                    $('.runUtf8').show();
                } else {
                    $('.runUtf8').hide();
                }
            });
        });
    </script>

Pure js - `sqlActionsMenu` not undefined

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
        if(document.querySelectorAll('form[name="sql"] input[type="checkbox"][name="masterblaster"]').length > 0) {
            document.querySelector('form[name="sql"] input[type="checkbox"][name="masterblaster"]').click(function() {
                const el = document.querySelector('form[name="sql"] input[type="checkbox"][name="id[]"]').checked = document.querySelector('form[name="sql"] input[type="checkbox"][name="masterblaster"]').checked;
            })
        }
 
        var sqlActionsMenu = document.getElementById('sqlActionsMenu');
 
        if (sqlActionsMenu == 'utf8') {
            div.classList.add("runUtf8");
        }
 
        var sqlActionsMenu1 = sqlActionsMenu.element.onchange;
 
        if (sqlActionsMenu1) {
            var selected = this.value;
 
           if (selected == 'utf8') {
               span.classList.add("runUtf8");
            } else {
               span.classList.removeAttribute("runUtf8");
            }
        }
    </script>

**Doksuri** · 01/03/2021, 08h57

ton script doit etre execute trop tot (surement au milieu de ton code html)
soit tu deplaces ton script a la fin du <body>
soit tu englobles ton JS dans un window.addEventListener("DOMContentLoaded", () => { .... }

**oitsuki** · 01/03/2021, 14h25

Peut etre mais cette adaptation ne fonctionne pas.
D�ja dans le tableau, impossible de s�lectionner toute les checkbox et apr�s le probl�me du hide show, qui � mon avis ne sont pas correct
Continue � cherche mais id�es bienvenues.

**NoSmoking** · 01/03/2021, 18h08

Bonjour,

Continue � cherche mais id�es bienvenues.

Je pense que le plus important pour toi est que tu comprennes ce que tu �cris, car j'ai de gros doutes

Si l'on prend

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var sqlActionsMenu = document.getElementById('sqlActionsMenu');

ici tu r�cup�res l'�l�ment du DOM qui a pour id="sqlActionsMenu"...
et juste apr�s tu �cris

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
if (sqlActionsMenu == 'utf8') {
    div.classList.add("runUtf8");
}

l� tu compares un �l�ment du DOM, trouv� juste avant, avec une cha�ne de caract�res cela ne pourra donc jamais fonctionner !

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var sqlActionsMenu1 = sqlActionsMenu.element.onchange;

ici tu affectes � ta variable l'� adresse � de la fonction d�clench�e sur le onchange de l'�l�ment que tu as r�cup�r� ci-dessus, et non pas le r�sultat !

ce qui fait que la ligne suivante :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part