Créer un élément cliquable crée en javascript (débutant)

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
superfloflo39
Messages : 2
Enregistré le : 21 janv. 2023, 08:39

Créer un élément cliquable crée en javascript (débutant)

Message par superfloflo39 » 21 janv. 2023, 08:54

Bonjour et bonne année à tout le monde,

J'ai crée une div qui contient une vidéo.
A la fin de la vidéo j'aimerais qu'il y ait une question "as tu compris?" qui s'affiche par dessus la dernière image avec un choix "oui" ou "non" puis une nouvelle vidéo qui se lance suivant si on a répondu oui ou non.

J'ai crée un code html et javascript (ci-dessous).
A la fin de la vidéo il y a bien la question qui se pose sur la dernière image avec des boutons oui ou non.
Mais quand on clique sur le bouton oui, rien ne se passe.

Est-ce que ma ligne e2.id="oui"; ajoute bien id="oui" à l'élément crée? (je débute avec js)

Si oui, j'imagine que je m'y prends mal...Avez vous une idée ou solution pour que mon bouton soit cliquable?

Code : Tout sélectionner

<div id="activite" style="width:720px;height:400px;border:10px solid grey;">
<video width="720px" preload="auto" controls id="idvideo">
	<source type="video/mp4" src="video1.mp4"></source>
</video> 
</div>



<script type='text/javascript'>
    document.getElementById('idvideo').addEventListener('ended',fonction1,false);
	
    function fonction1(e) {
		document.getElementById("activite").innerHTML="";
		document.getElementById("activite").style="width:720px;height:400px;border:10px solid grey;background-image: url('arriereplan1.jpg');";
		
		let el = document.createElement("div");
		el.style="position:sticky;left:230px;width:260px;text-align:center;font-size:30px;margin-top:100px;color:white;font-family : Verdana, Arial, sans-serif;background-color:grey;";
		el.innerText="As-tu compris?";
		let e2 = document.createElement("div");
		e2.id="oui";
		e2.style="position:sticky;margin-top:100px;left:200px;width:100px;height:30px;font-size:20px;color:white;text-align:center;background-color:green;";
		e2.innerText="Oui";
		let e3 = document.createElement("div");
		e3.id="non";
		e3.style="position:sticky;left:400px;margin-top:-30px;width:100px;height:30px;font-size:20px;color:white;text-align:center;background-color:red;";
		e3.innerText="Non";
		
		document.getElementById("activite").appendChild(el);
		document.getElementById("activite").appendChild(e2);
		document.getElementById("activite").appendChild(e3);
	}
	
	document.getElementById('oui').addEventListener('click',fonction2);
	function fonction2(e) {
		alert('click!');
	}
	
</script>

Merci

Florent (cmath.fr)

Avatar du membre
webmaster
Administrateur du site
Messages : 560
Enregistré le : 28 févr. 2017, 15:19

Re: Créer un élément cliquable crée en javascript (débutant)

Message par webmaster » 21 janv. 2023, 11:07

Bonjour

La ligne suivante est appelée alors que le div n'est pas créé puisque la vidéo n'est pas "ended"

Code : Tout sélectionner

document.getElementById('oui').addEventListener('click',fonction2);
Il faut appeler le gestionnaire d'événement au moment de créer les div dans la page (a la fin de fonction1)
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

superfloflo39
Messages : 2
Enregistré le : 21 janv. 2023, 08:39

Re: Créer un élément cliquable crée en javascript (débutant)

Message par superfloflo39 » 21 janv. 2023, 13:32

En effet !

Mon problème est résolu.

Un très grand merci à vous! :D

Répondre