11521 sujets

JavaScript, DOM et API Web HTML5

CHECKBOX

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

parsimonhi a écrit :
Bonjour,


No comment ! Smiley cannelle Smiley cannelle Smiley cannelle

Amicalement,


Ouais je sais ^^ mais je me dis que c'est toujours "moins pire" que le gros A REGARDER PLUS TARD" de YouTube Smiley lol
js_html a écrit :
Ah oui en passant comme ça bien sure, mais il faut déjà s'y connaitre un peu plus et...il n'y pas grand monde qui fera ça Smiley ravi

Tu peux quand même perdre pas mal de clients...
Je dis ça, je ne dis rien... Smiley lol
Moi, si je vois ça, je partage la playlist que j'ai créé gratuitement... Smiley lol Smiley lol

C'est à celui-là que je voulais répondre ^^
<!DOCTYPE html>
<html>
	<head>
		<title>Checkbox</title>
		<meta charset="utf-8">
	</head>
	<body>
		
		<iframe src="https://www.dailymotion.com/embed/video/k2VxkPRmmNG6JVwE7cE" height="350px" width="650px"></iframe> 
		<input type="checkbox" id="k3HMMrTzCsALQswGirU" >

		<script>
for(vari=0;i<localStorage.length;i++) console.log(localStorage.key(i));

			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(this.id)==null){
						localStorage.setItem(this.id,"");
					}
				})
			}
			for(var i=0;i<localStorage.length;i++){
				if(document.getElementById(localStorage.key(i))!=null){
					document.getElementById(localStorage.key(i)).checked=true;
					document.getElementById(localStorage.key(i)).disabled=true;
				}
			}
			/*https://www.alsacreations.com/profil/lire/81417-jshtml.html*/
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>Checkbox</title>
		<meta charset="utf-8">
	</head>
	<body>
		
		<iframe src="https://www.dailymotion.com/embed/video/k2VxkPRmmNG6JVwE7cE" height="350px" width="650px"></iframe> 
		<input type="checkbox" id="k3HMMrTzCsALQswGirU" >

		<script>
for(vari=0;i<localStorage.length;i++) console.log(localStorage.key(i));

			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(this.id)==null){
						localStorage.setItem(this.id,"");
					}
				})
			}
			for(var i=0;i<localStorage.length;i++){
				if(document.getElementById(localStorage.key(i))!=null){
					document.getElementById(localStorage.key(i)).checked=true;
					document.getElementById(localStorage.key(i)).disabled=true;
				}
			}
			/*https://www.alsacreations.com/profil/lire/81417-jshtml.html*/
		</script>
	</body>
</html>
Donc
<!DOCTYPE html>
<html>
	<head>
		<title>Checkbox</title>
		<meta charset="utf-8">
	</head>
	<body>
</script>
	</body>
</html>

t'enlève !

D'ailleurs pour l'id, je t'ai dit de mettre celle de la vidéo ou une logique 1, 2, 3...

C'est quoi la différence entre les deux ? Le premier code est mieux.
Storage {wistia-video-progress-ikt4idjlce: "{"resumableKey":"6f31622_2b31b75d-cb41-4266-a788-004576992b9c-3c3dc84e1-750ca32b00ba-66f3"}", mc_pixel_session_data: "{"sessionId":"012c7c69fc6029838112ac2c97e26a643b68…geId":"666665217005498","token":null,"custom":{}}", fbclid: "IwAR2eY3g23T43tKN2AgSDFvfCgPGj7oiVXC34-XVnXRh2PN3p5BCdaidu_dI", k3HMMrTzCsALQswGirU: "", cf_uvid: "ff9db0c16112fcfc6be8dbb487d253ce", …}
js_html a écrit :
Donc
&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Checkbox&lt;/title&gt;
		&lt;meta charset="utf-8"&gt;
	&lt;/head&gt;
	&lt;body&gt;
&lt;/script&gt;
	&lt;/body&gt;
&lt;/html&gt;

t'enlève !

D'ailleurs pour l'id, je t'ai dit de mettre celle de la vidéo ou une logique 1, 2, 3...

C'est quoi la différence entre les deux ? Le premier code est mieux.


Alors j'avais essayé avec ID 0001 mais aucune différence
Avec cjoint, envoie après avoir cliqué sur le bouton rouge, c'est mieux...

Je n'utilise pas chrome, mais les erreurs sont apparues après que tu as tapé localStorage ? Je ce comprends pas le sens de ce qui est apparu...
Modérateur
Bonjour,

js_html a écrit :
Donc
<!DOCTYPE html>
<html>
...
</html>

t'enlève !


Je n'ai pas compris pourquoi il faudrait enlever ça : c'est son code (qui est ensuite probablement inséré dans une iframe par son hébergeur).

js_html a écrit :
Oui, le problème est que ça ne rajoute pas dans le localStorage.

Il me semble que si (il y a k3HMMrTzCsALQswGirU: "" dans le local storage).

@Mark19
Pour l'id du input, il faudrait reprendre celui de la video. Par exemple, dans ton cas ici, c'est id="k2VxkPRmmNG6JVwE7cE" et non pas id="k3HMMrTzCsALQswGirU".

Et pour chaque autre input, il faudrait faire la même chose (prendre l'id qui est dans l'url de la video correspondante).

Vois-tu ce que je veux dire ?

Enfin, tu peux essayer le code suivant :

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(this.id)==null){
						localStorage.setItem(this.id,"");
					}
				})
			}
			for(var i=0;i<localStorage.length;i++){
				if(document.getElementById(localStorage.key(i))!=null){
					document.getElementById(localStorage.key(i)).checked=true;
					document.getElementById(localStorage.key(i)).disabled=true;
				}
			}
});
			/*https://www.alsacreations.com/profil/lire/81417-jshtml.html*/


Amicalement,
a écrit :
Je n'ai pas compris pourquoi il faudrait enlever ça : c'est son code (qui est ensuite probablement inséré dans une iframe par son hébergeur).
Il faut créer un document html à l'intérieur de la page pour remttre les iframe vidéos et le script ?

a écrit :
Il me semble que si (il y a k3HMMrTzCsALQswGirU: "" dans le local storage).
Effectivement ! Je ne l'avais pas vu !

T'a rajouté window.addEventListener('load', function() {});, c'est ça ? D'ailleurs, ça sert à quoi ? Mettre le script à la fin, c'est la même chose ou c'est différent ?

PS : La dernière ligne, tu peux l'enlever.
Modifié par js_html (25 Feb 2021 - 13:07)
Modérateur
Bonjour,

js_html a écrit :
Il faut créer un document html à l'intérieur de la page pour remettre les iframe vidéos et le script ?

Non, non, rien à voir avec les iframes des vidéos. Je pense que l'hébergeur rajoute un iframe (ou je ne sais quoi d'autres) intermédiaire pour chaque membre dans lequel il inclut le code fourni par le membre. Ainsi, il ne "pollue" pas son propre code (celui de l'hébergeur) qui est autour du contenu codé par le membre.

js_html a écrit :
T'a rajouté window.addEventListener('load', function() {});, c'est ça ? D'ailleurs, ça sert à quoi ?

Je soupçonne que dans la version précédente, quand ton script était déclenché, la page n'était pas encore pas prête. Et du coup, la modification des inputs ne pouvait pas se faire correctement. Ce bout de code que je rajoute fait en sorte d'attendre que la page soit prête avant que ton script soit exécuté. Mais attendons le test pour voir si c'est vraiment ça.

Amicalement,
a écrit :
Je soupçonne que dans la version précédente, quand ton script était déclenché, la page n'était pas encore pas prête. Et du coup, la modification des inputs ne pouvait pas se faire correctement. Ce bout de code que je rajoute fait en sorte d'attendre que la page soit prête avant que ton script soit exécuté. Mais attendons le test pour voir si c'est vraiment ça.
C'est possible, mais ça ne charge pas dans l'ordre (hormis title, meta, etc.) ? Le script étant à la fin, il ne s'exécute pas après que le reste soit chargé ?
Si j'ai bien compris je teste ça 

<!DOCTYPE html>
<html>
	<head>
		<title>Checkbox</title>
		<meta charset="utf-8">
	</head>
	<body>	

<iframe src="https://www.dailymotion.com/embed/video/k2VxkPRmmNG6JVwE7cE" height="350px" width="650px"></iframe> 
		<input type="checkbox" id="k2VxkPRmmNG6JVwE7cE" >
		<script>
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(this.id)==null){
						localStorage.setItem(this.id,"");
					}
				})
			}
			for(var i=0;i<localStorage.length;i++){
				if(document.getElementById(localStorage.key(i))!=null){
					document.getElementById(localStorage.key(i)).checked=true;
					document.getElementById(localStorage.key(i)).disabled=true;
				}
			}
});
Alors avec ce code je peux cocher et décocher directement et quand j'actualise même problème que d'habitude. C'est peut-être moi qui est pas compris où placer le code alors
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)
Pages :
Sujet clos
Aller à