basti1012.bplaced.net

Hallo! Leider hat mir Google nichts ausgespuckt, außer Quizze zu HTML :D Ich würde gerne, dass bei mehreren Antwortmöglichkeiten, mit Klick auf das richtige Feld, dieses z.B. grün aufleuchtet. Bislang habe ich es so gelöst, dass sich ein neues Fenster öffnet. Das möchte ich aber gerne umgehen.

Code

                                    
                                <style>
  #all{
  border:1px solid black;
  min-height:330px;
  height:auto;
  width:80%;
  margin:0 auto;
  justify-content:scenter;
  display:flex;
  flex-direction:column;
}
.antworten{
  width:45%;
  height:50px;
  font-size:35px;
  line-height:50px;
  text-align:center;
  border:1px solid black;
    margin:5px;
}
.antworten:hover{
  background:rgba(2,2,255,0.8) !important;
  color:white;

}
#aw{
  justify-content:center;
  display:flex;
  flex-wrap:wrap;
}
h3{
  text-decoration:underline;
  margin:10px 0 0 0;
  padding:5px 20px;
}
h4{
  padding:10px;
  text-align:center;
}
</style>
<div id="all">
  <h3>Frage:</h3>
   <h4>Von 7 Geschwistern hat jede 3 Brüder, wieviele Geschwister sind es zusammen ??</h3>
 
  <div id="aw">
  <div class="antworten" data-ant="1" id="ant1">21</div> 
  <div class="antworten" data-ant="1" id="ant2">14</div> 
  <div class="antworten" data-ant="1" id="ant3">12</div> 
  <div class="antworten" data-ant="1" id="ant4">16</div> 
  <div class="antworten" data-ant="2" id="ant5">10</div> 
  <div class="antworten" data-ant="1" id="ant6">15</div> 
  </div>
</div>
<input type="button" id="reset" value="Reset">
<script>
  var richtig=1;
  but=document.querySelectorAll('.antworten');
  start();
  function start(){
       but.forEach((i) => {
          i.style.background='none';
          i.addEventListener('click',function(){
          if(i.getAttribute('data-ant')==2){
              i.style.background='green';
          }else{
              i.style.background='red';
          }
       })
  })
  }
  document.getElementById('reset').addEventListener('click',function(){
  
  start();
  });
</script>