11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Element.onclick

Bonjour,

Je convertis (péniblement) mes scripts old school jQuery en vanilla js et je rencontre un problème. Je veux que mon script change l'attribut type d'un imput password en 'text' en appuyant sur un bouton :
// from:
<input type="password" name="password"/>
// to:
<input type="text" name="password"/>

Le bouton - un lien pour l'instant on verra après - est créé en JS. Jusque là tout va bien, mais ensuite je n'arrive pas à permuter avec un click :
see.onclick = seePassword(input); // <- comportement attendu : changement d'attribut en 'text' si clique sur l'élement frère

Pour l'instant tous les inputs password de la page passent en type='text'.

Voilà voilà, si quelqu'un pouvait m'aider à y voir plus clair...
Modifié par Olivier C (16 Jun 2020 - 04:29)
Modérateur
Et l'eau,


fait en es5. 

<form>
    <div class="input">
        <label for="un_champ">un champ</label>
        <input id="un_champ" type="password" placeholder=".......">
    </div>
    <div class="input">
        <label for="un_autre_champ">un autre champ</label>
        <input id="un_autre_champ" type="password" placeholder=".......">
    </div>
</form>




Array.prototype.slice.call(document.querySelectorAll('input[type="password"]')).forEach(function($input){
    $input.insertAdjacentHTML('afterend', '<button type="button">toggle password</button>')
});
Array.prototype.slice.call(document.querySelectorAll('input[type="password"] + button')).forEach(function($button){
    $button.addEventListener('click', function(e){
        var $input = $button.previousElementSibling,
            typeAttr = $input.type === 'password'? 'text' : 'password';
        $input.type = typeAttr;
    });
});

Modifié par niuxe (02 Jun 2020 - 01:34)
Meilleure solution
Génial, merci.

Rien qu'en décortiquant ton code je vais apprendre beaucoup de choses, et pour moi c'est encore ça le plus important.
J'ai pris le temps de décortiquer ton code et de voir ce qui n'allait pas chez moi : un problème de syntaxe avec .onclick, il fallait mettre des accolades autour de ma fonction appelée :
see.onclick = {
  seePassword(input);
}


Sinon je me suis documenté un peu, juste pour le fun, la solution en ES6, je garde la solution du bouton qui est la plus adaptée (édition : suppression du deuxième for of au profit d'un seul) :
// ES6:
'use strict';

const readablePassword = (() => {
  const inputs = document.querySelectorAll('.see-password');
  for (const input of inputs) {
    input.insertAdjacentHTML('afterend', '<button type="button">see</button>');
    const button = input.nextElementSibling;
    button.addEventListener('click', () => {
      const typeAttr = input.type === 'password'? 'text' : 'password';
      input.type = typeAttr;
    }, false);
  }
})();

Merci encore Niuxe.
Modifié par Olivier C (07 Jun 2020 - 20:43)
Modérateur
J'ai pas vu que tu avais mis une réponse.

Pour l'ES6, je préfère utiliser forEach. Lorsque j'utilise for/of, j'ai tendance à faire un Array.from pour le selecteur. Après c'est juste une question de style.
Remarque bien que je n'ai pas de préférence, je me fais juste la main à partir de n'importe quoi, vu d'où je pars...
Jean-Pierre-Bruneau a écrit :
Parfait, mais avec "this" seul le bouton cliqué rends le texte visible Smiley smile 

window.onload=function(){
document.querySelector("button").addEventListener("click", function (){
this.parentNode.querySelector("input").type = (this.parentNode.querySelector("input").type == "text") ? "password" : "text";}, false);}


Merci pour ce retour et aussi pour ce mot clef que je n'ai - à tord - encore jamais utilisé Smiley rolleyes ...

Juste une petite correction de ton code car celui-ci ne fonctionne pas si plusieurs champs de type password présents sur la page (sur une page d'inscription demandant confirmation du mot de passe par exemple) :
const buttons = document.querySelectorAll('button');
  for (const button of buttons) {
    button.addEventListener('click', function (){
      const input = this.previousElementSibling;
      input.type = (input.type == 'text') ? 'password' : 'text';
  }, false);
}

Question subsidiaire : le `window.onload` est-il obligatoire ? `.addEventListener()` ne suffirait-il pas ?
Modifié par Olivier C (07 Jun 2020 - 18:08)
Sujet clos
Aller à