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>
Florent (cmath.fr)