Créer un élément cliquable crée en javascript (débutant)
Posté : 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?
Merci
Florent (cmath.fr)
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)