Débutant en JS depuis peu, je me lance des micros défis. Voilà, j'ai un exercice où l'on rajoute des éléments pris dans un tableau, dans le DOM. Constituer la boucle, créer les éléments à insérer, jusque là tout va bien... Le rendu donne des questions avec des réponses à afficher au click d'un bouton, cela aussi pas de problèmes. Et là, je me dis : et si je rajoutais un bouton qui permettrait à l'utilisateur d'éditer lui même de nouvelles questions/réponses via un prompt? Donc je suis parti à créer mon button, je me dis avec un eventListener sur celui ci qui déclencherai l'affichage du même bloc questions / réponses à la suite des autres. Dans ma logique, il faudrait créer un nouvel élément et l'ajouter au tableau déjà existant et se servir de la boucle déjà mise en place...enfin, je crois...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz interactif</title>
</head>
<body>
<div id="contenu"></div>
<script src="script.js"></script>
</body>
</html>
// Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
var questions = [
{
enonce: "Combien font 2+2 ?",
reponse: "2+2 = 4"
},
{
enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
reponse: "1492"
},
{
enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
reponse: "La lettre N"
}
];
var i = 1;//variable pour numéro de question, débute à 1
var contenu = document.getElementById('contenu');
questions.forEach(el =>{
//création d'une div pour chaque élément
var divElt = document.createElement('div');
divElt.style.margin = '15px 200px 15px 15px';
divElt.style.backgroundColor = '#d6d6d6';
divElt.style.padding = '20px';
//création du strong Questions
var strongElt = document.createElement('strong');
strongElt.textContent = 'Qestion ' + i + ' : ';
divElt.appendChild(strongElt);
contenu.appendChild(divElt);
//création de l'énoncé
var enonceElt = document.createElement('p');
enonceElt.style.display = 'inline-block';
enonceElt.style.margin = "0";
enonceElt.textContent = el.enonce;
divElt.appendChild(enonceElt);
//numéro de question dynamique
i++;
//bouton réponse
var zoneR = document.createElement('div');
var buttonElt = document.createElement('button');
buttonElt.textContent = 'Afficher la réponse';
buttonElt.style.margin = '10px 0 10px';
zoneR.appendChild(buttonElt);
divElt.appendChild(zoneR);
var reponseElt = document.createElement('i');
reponseElt.textContent = el.reponse;
reponseElt.style.boxShadow = '2px 2px 4px #333';
reponseElt.style.backgroundColor = 'white';
reponseElt.style.padding = '5px';
reponseElt.style.borderRadius = '5px';
reponseElt.style.marginLeft = '15px';
reponseElt.style.display = 'none';
zoneR.appendChild(reponseElt);
//apparition de la réponse au click à la place du bouton
buttonElt.addEventListener('click', function(e){
if(reponseElt.style.display === 'none'){
buttonElt.innerHTML = 'Masquer la réponse';
reponseElt.style.display = 'inline-block';
}
else{
buttonElt.innerHTML = 'Afficher la réponse';
reponseElt.style.display = 'none';
}
});
});
var newDivButton = document.createElement('div');
newDivButton.id = 'newDiv';
var newButtonElt = document.createElement('button');
newButtonElt.textContent = 'Editer une nouvelle question';
newButtonElt.style.padding = '10px';
newButtonElt.style.margin = '15px 200px 15px 15px';
newButtonElt.style.border = '2px solid #333';
newDivButton.appendChild(newButtonElt);
newDivButton.style.textAlign = 'center';
document.getElementById('contenu').appendChild(newDivButton);
newButtonElt.addEventListener('click', function(){
//et là je sèche....
});