11480 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

OK ! Donc, là, c'est pire ? Il n'y a plus de disabled (interdiction de cocher) ? Le code ne se lance pas ?

À chaque test, essaie localStorage.clear() dans la console, peut-être...
Modifié par js_html (25 Feb 2021 - 13:22)
Modérateur
Bonjour,

js_html a écrit :
Le script étant à la fin, il ne s'exécute pas après que le reste soit chargé ?

Bah pas forcément. En particulier, le contenu ou les valeurs des éléments de formulaire (dont font partie les checkbox) peuvent être initialisés après que tout ce qui est dans la page ait été exécuté (ces éléments peuvent par exemple utiliser des informations issues des remplissages précédents du formulaire). À une époque, c'était très dépendant des navigateurs. Chacun faisait sa cuisine comme il pouvait. Et du coup, la bonne pratique consiste (quand c'est nécessaire) à initialiser le contenu ou la valeur de ces éléments de formulaire après la survenu de l'évènement 'load'.

Ceci étant, encore une fois, difficile d'être sûr que c'est ça sans avoir testé dans le contexte dans lequel se trouve ce code.

Amicalement,
Modérateur
Bonjour,

Mask19 a écrit :
Si j'ai bien compris je teste ça
...


Il manque un bout à la fin (</script></body></html>).

Amicalement,
a écrit :
Ceci étant, encore une fois, difficile d'être sûr que c'est ça sans avoir testé dans le contexte dans lequel se trouve ce code.
Oui, effectivement ! Mais merci de m'avoir expliqué...
a écrit :
Il manque un bout à la fin (</script></body></html>).
C'est peut-être pour ça que ça ne fonctionnait pas ! Bien vu !
Modérateur
Bonjour,

Je crois avoir vu un autre problème. Comme dans le localStorage, il y a plein de trucs (pas seulement ce qu'on y a ajouté avec le script de js_html), la boucle for(var i=0;i<localStorage.length;i++){} va essayer de s'appliquer à des éléments du localStorage qui ne sont pas concernés.

Amicalement,
Modérateur
Bonjour,
js_html a écrit :
Ce n'est pas bon, comme j'ai mis ce test :
if(document.getElementById(localStorage.key(i))!=null){
?

Ce n'est pas parfait mais ça aide pas mal en effet à écarter les libellés du local storage qui ne sont pas effectivement des ids dans la page.

Un autre soucis est que les ids des vidéos commencent parfois par un nombre, mais les libellés du local storage, eux, doivent commencer par une lettre.

Du coup, je pense qu'il serait bon de préfixer tous ces trucs par une chaine de caractère spécifique genre "Mask19".

Par exemple (le code html, lui, reste inchangé, sans les préfixes "Mask19" devant les ids) :
var seed = "Mask19";
window.addEventListener('load', function() {
  for (var i = 0; i < document.querySelectorAll("input[type='checkbox']").length; i++) {
    document.querySelectorAll("input[type='checkbox']")[i].addEventListener("change", function() {
      this.checked = true;
      this.disabled = true;
      if (localStorage.getItem(seed + this.id) == null) {
        localStorage.setItem(seed + this.id, "");
      }
    })
  }
  for (var i = 0; i < localStorage.length; i++) {
    let id = localStorage.key(i),
      e, r;
    r = new RegExp("^" + seed);
    if (id.match(r)) {
      id = id.replace(r, "");
      e = document.getElementById(id);
      if (e) {
        e.checked = true;
        e.disabled = true;
      }
    }
  }
});


Amicalement,
Modifié par parsimonhi (25 Feb 2021 - 14:19)
parsimonhi a écrit :
Bonjour,

Ce n'est pas parfait mais ça aide pas mal en effet à écarter les libellés du local storage qui ne sont pas effectivement des ids dans la page.

Un autre soucis est que les ids des vidéos commencent parfois par un nombre, mais les libellés du local storage, eux, doivent commencer par une lettre.

Du coup, je pense qu'il serait bon de préfixer tous ces trucs par une chaine de caractère spécifique genre "Mask19".

Par exemple (le code html, lui, reste inchangé, sans les préfixes "Mask19" devant les ids) :
var seed = "Mask19";
window.addEventListener('load', function() {
  for (var i = 0; i &lt; document.querySelectorAll("input[type='checkbox']").length; i++) {
    document.querySelectorAll("input[type='checkbox']")[i].addEventListener("change", function() {
      this.checked = true;
      this.disabled = true;
      if (localStorage.getItem(seed + this.id) == null) {
        localStorage.setItem(seed + this.id, "");
      }
    })
  }
  for (var i = 0; i &lt; localStorage.length; i++) {
    let id = localStorage.key(i),
      e, r;
    r = new RegExp("^" + seed);
    if (id.match(r)) {
      id = id.replace(r, "");
      e = document.getElementById(id);
      if (e) {
        e.checked = true;
        e.disabled = true;
      }
    }
  }
});


Amicalement,


J'avoue ne pas avoir compris pour le Mask19...
Modérateur
Bonjour,

Mask19 a écrit :
J'avoue ne pas avoir compris pour le Mask19...


Si on préfixe les libellés dans le localStorage par "Mask19" quand ça concerne les vidéos, on sera sûr d'une part qu'on ira pas utiliser d'autres informations du localStorage par inadvertance (puisqu'on testera si le libellé commence par un "Mask19" avant de l'utiliser). Et d'autre part, on sera sûr que le libellé commencera par une lettre.

Amicalement,
Je t'explique :
Certaines vidéos ont une id (comme k2VxkPRmmNG6JVwE7cE) qui commence par un chiffre.
Or, en HTML, écrire id="0k2Vxk" par exemple est interdit, car une id doit commencer par une lettre.
Du coup, il propose de rajouter quelque chose au début de chaque id...
Bon bah t'avais déjà répondu...

Mais, si c'est pour mettre les id à la main dans chaque checkbox, autant rajouter, à la main, par exemple "A", au début de chaque ID. Sinon, avant l'exécution du script, elles ne sont pas réglementaires.
Sinon, si c'est pour que toutes les id s'entrent toutes seules, là, c'est intéressant de le faire en JS...
Modérateur
Bonjour,

js_html a écrit :
Certaines vidéos ont une id (comme k2VxkPRmmNG6JVwE7cE) qui commence par un chiffre.
Or, en HTML, écrire id="0k2Vxk" par exemple est interdit, car une id doit commencer par une lettre.

What??? Smiley hinhin

On peut avoir des ids html commençant par des chiffres.

C'est juste déconseillé car on peut avoir des problèmes avec certains navigateurs ésotériques, et aussi des surprises ailleurs dans le code (par exemple dans le css).

js_html a écrit :
Mais, si c'est pour mettre les id à la main dans chaque checkbox, autant rajouter, à la main, par exemple "A", au début de chaque ID.

Oui, on peut aussi faire ça.

Amicalement,
a écrit :
C'est juste déconseillé car on peut avoir des problèmes avec certains navigateurs ésotériques, et aussi des surprises ailleurs dans le code (par exemple dans le css).
Donc on peut dire que c'est interdit, non ?

Je pense, sans vouloir t'offenser que des trois méthodes d'id, celle que tu as proposé est la troisième meilleure...
Modifié par js_html (25 Feb 2021 - 14:50)
Modérateur
Bonjour,

js_html a écrit :
Je pense, sans vouloir t'offenser que des trois méthodes d'id, celle que tu as proposé est la troisième meilleure...


Si j'étais tout seul sur le projet, il n'y aurait que les videos dans le html (comme c'est déjà le cas dans les pages de Mask19), sans id, et tout le reste (ajout de checkboxes dans le html ou tout autre système pour marquer les vidéos comme lues, gestion du local storage) serait fait en js. Smiley cligne

EDIT: et je ne mettrais qu'une seule entrée dans le local storage avec un tableau transformé en chaine de caractère.

Amicalement,
Modifié par parsimonhi (25 Feb 2021 - 14:56)
Quand j'ai écrit "Sinon, si c'est pour que toutes les id s'entrent toutes seules, là, c'est intéressant de le faire en JS...", j'ai effectivement pensé à mettre "que les videos dans le html (comme c'est déjà le cas dans les pages de Mask19), sans id, et tout le reste (ajout de checkboxes dans le html ou tout autre système pour marquer les vidéos comme lues, gestion du local storage) [...] en js."

a écrit :
et je ne mettrais qu'une seule entrée dans le local storage avec un tableau transformé en chaine de caractère.
Effectivement, c'est mieux.
a écrit :
Si j'étais tout seul sur le projet...
Tu veux que je parte ? Comme ça, tu fais ce que tu veux ? Ou pas ?
Modifié par js_html (25 Feb 2021 - 15:04)
Modérateur
Bonjour,

js_html a écrit :
Tu veux que je parte ? Comme ça, tu fais ce que tu veux ? Ou pas ?


Non, non, c'est très bien comme ça. Smiley party

Amicalement,
<script src="https://fast.wistia.com/embed/medias/h37i2oo3c1.jsonp" async=""></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async=""></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_h37i2oo3c1 videoFoam=true wistia_embed_initialized" style="height:100%;position:relative;width:100%" id="wistia-h37i2oo3c1-1"><div class="wistia_swatch" style="height: 100%; left: 0px; opacity: 1; overflow: hidden; position: absolute; top: 0px; transition: opacity 200ms ease 0s; width: 100%;"><img src="https://fast.wistia.com/embed/medias/h37i2oo3c1/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;"></div><div id="wistia_chrome_26" class="w-chrome" tabindex="-1" style="display: inline-block; height: 100%; line-height: normal; margin: 0px; padding: 0px; position: relative; vertical-align: top; width: 100%; zoom: 1; outline: none; overflow: hidden; box-sizing: content-box;"><div id="wistia_grid_32_wrapper" style="display: block;"><div id="wistia_grid_32_above"></div><div id="wistia_grid_32_main"><div id="wistia_grid_32_behind"></div><div id="wistia_grid_32_center"><div class="w-video-wrapper w-css-reset" style="clip: rect(0px, 0px, 0px, 0px); height: 100%; position: absolute; top: 0px; width: 100%; opacity: 1; background-color: rgb(0, 0, 0);"></div><div class="w-ui-container" style="height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; opacity: 1;"></div></div><div id="wistia_grid_32_front"></div><div id="wistia_grid_32_top_inside"><div id="wistia_grid_32_top"></div></div><div id="wistia_grid_32_bottom_inside"><div id="wistia_grid_32_bottom"></div></div><div id="wistia_grid_32_left_inside"><div id="wistia_grid_32_left"></div></div><div id="wistia_grid_32_right_inside"><div id="wistia_grid_32_right"></div></div></div><div id="wistia_grid_32_below"></div><style id="wistia_33_style" type="text/css" class="wistia_injected_style">#wistia_grid_32_wrapper{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;font-family:Arial,sans-serif;font-size:14px;height:100%;position:relative;text-align:left;width:100%;}#wistia_grid_32_wrapper *{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}#wistia_grid_32_above{position:relative;}#wistia_grid_32_main{display:block;height:100%;position:relative;}#wistia_grid_32_behind{height:100%;left:0;position:absolute;top:0;width:100%;}#wistia_grid_32_center{height:100%;overflow:hidden;position:relative;width:100%;}#wistia_grid_32_front{display:none;height:100%;left:0;position:absolute;top:0;width:100%;}#wistia_grid_32_top_inside{position:absolute;left:0;top:0;width:100%;}#wistia_grid_32_top{width:100%;position:absolute;bottom:0;left:0;}#wistia_grid_32_bottom_inside{position:absolute;left:0;bottom:0;width:100%;}#wistia_grid_32_bottom{width:100%;position:absolute;top:0;left:0;}#wistia_grid_32_left_inside{height:100%;position:absolute;left:0;top:0;}#wistia_grid_32_left{height:100%;position:absolute;right:0;top:0;}#wistia_grid_32_right_inside{height:100%;right:0;position:absolute;top:0;}#wistia_grid_32_right{height:100%;left:0;position:absolute;top:0;}#wistia_grid_32_below{position:relative;}</style></div></div></div></div></div>


Voilà le code de wistia Smiley eek Smiley eek Smiley eek

Alors j'ai utilisé Wistia avant de trouver DailyMotion parce qu'il y a des droits musicaux et YouTube bloquait le son...du coup il a fallu que je trouve une alternative
Pages :