Convertir un code jQuery en JavaScript vanilla

Version imprimable

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:

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:

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>

01/03/2021, 08h57
Doksuri

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", () => { .... }
01/03/2021, 14h25
oitsuki

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.
01/03/2021, 18h08
NoSmoking
Bonjour,

Citation:

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 :mrgreen:
Si l'on prend

Code:

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:

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:

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:

if (sqlActionsMenu1) {

n'a pas plus de signification ...

Il te faut donc commencer par regarder de la documentation concernant les méthodes que tu utilises.
01/03/2021, 22h41
oitsuki

Oui je suis nul sur ce langage, et oui il y a des conneries, le js ne m'aime pas, moi non plus :)
02/03/2021, 09h33
NoSmoking

Citation:

le js ne m'aime pas, moi non plus :)

:calim2: il ne faut pas que cela soit, ou devienne, une fatalité !