querySelectorAll sélectionner toutes mes classes passées en paramètre

Bonjour j'essaye de reccuperer tout mes champs qui ont un attribut classe=champX ensuite d'appliquer l'element select pour les selectionner

mes mon code ne selectionne que le premier element rencontré donc mon second champs n'est pas selectionné .

querySelectorAll : cette function retourne uniquement le premier element qu'il rencontre mais il me semble si je lui dit de parcourir et ensuite

appliquer mon select sa devrait marcher logiquement sauf erreur de ma ma part

voici le code javascript

NB : le CSS est appliqué à tout les deux champs sauf le select qui n'est pas appliqué aux deux champs

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
        copyTextareaBtn.addEventListener('click', function(event) {
            var x = document.getElementById("tout").querySelectorAll(".champsX");
            var i;
            for (i = 0; i < x.length; i++) {
                x.item(i).style.backgroundColor = "red";
                x.item(i).select();
            }
            try {
                var msg = successful ? 'successful' : 'unsuccessful';
            } catch (err) {
                console.log('Oops');
            }
        });
    });
</script>

le code HTML

Code:

1
2
3
4
5
6
7
8
9
<body>
    <div id="tout">
        <label> Adresse 1 : </label>
        <input type="text" name="champs" class="champsX" id="ok" value="je suis la" />
        <label> Adresse 2 : </label>
        <input type="text" name="champX" class="champsX" id="ok2" value="seomme Text" />
    </div>
    <button class="js-textareacopybtn">clik</button>
</body>