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