CHECKBOX

(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)

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,

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 !

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,

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)

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,

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...

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???

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)

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.

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.

<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

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