😈╰•ALBERTO•╯😈 beh, diciamo che errori ce ne sarebbero diversi, faccio giusto queste correzioni (mi sono concetrato sugli aspetti concettuali, poi fatti questi se vuoi sistema nuovamente lo stile).
- lascia perdere il pulsante "conferma"
- "option" lo metti come classe e non come ID (gli ID infatti li richiami un'unica volta!! Approfondimento html.it)
#pop1 aveva display:none (chissà perché prima non visualizzava nulla ahah), bestemmie finché non l'ho notato 😅 - nel JavaScript abbiamo più cose da correggere:
var option1, var option2, var option3non ti servono- la sintassi
button1.document.getElementById("button1").addEventListener... è cannata!
- ho semplicemente rimosso il pulsante "conferma", casomai avresti anche sbagliato scrivendo
<button id="button_1"> quando nel file JavaScript lo hai definito come "button1" (attenzione ai nomi!!)
Detto ciò, nel CSS è sufficiente che cambi #option a .option e ovviamente rimuovi la proprietà display:none da #pop1.
Il file JavaScript diventa semplicemente (l'ho scritto tutto compatto):
option1.addEventListener("click" , function(){
document.getElementById("pop1").innerHTML="<h2>Risposta sbagliata</h2>";
});
option2.addEventListener("click" , function(){
document.getElementById("pop1").innerHTML="<h2>Risposta sbagliata</h2>";
});
option3.addEventListener("click" ,function(){
document.getElementById("pop1").innerHTML="<h2>Risposta esatta</h2>";
});
Il file HTML è strutturato in questo modo (scrivo solo la struttura che ci interessa, il resto da includere così come <body> ecc, è ovvio).
<div id="container_1">
<h1 id="title_1">Chi è il presidente della Repubblica attuale?</h1>
<div id="voice">
<p class="option" id="option1">Berlusconi</p>
<p class="option" id="option2">Giorgia Meloni</p>
<p class="option" id="option3">Sergio Mattarella</p>
</div>
<div id="pop1"></div>
Volendo si può ancora perfezionare, aggiusta poi lo stile se vuoi, fatto così comunque funziona (clicchi direttamente sul nome, non ti serve il pulsante "conferma").
