Enkel Quiz v2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Quiz</title>
    <style>
        .riktigFarge{
            color: #4df260;
        }
    </style>
</head>
<body>

<form id="frm">
    <h3>Hva er 1+1?</h3>
    <input type="radio" name="spm1" id="riktigEn" class="riktig"> <span class="spanRiktig">2</span><br>
    <input type="radio" name="spm1"> <span class="feil">3</span><br>
    <input type="radio" name="spm1"> <span class="feil">4</span><br>
    <h3>Hva er 2+2?</h3>
    <input type="radio" name="spm2"> <span class="feil">3</span><br>
    <input type="radio" name="spm2"> <span class="feil">5</span><br>
    <input type="radio" name="spm2" id="riktigTo" class="riktig"> <span class="spanRiktig">4</span><br>
    <h3>Hva er 4+4?</h3>
    <input type="radio" name="spm3" id="riktigTre" class="riktig"> <span class="spanRiktig">8</span><br>
    <input type="radio" name="spm3"> <span class="feil">6</span><br>
    <input type="radio" name="spm3"> <span class="feil">9</span><br>
    <h4>Hva er 8+8?</h4>
    <input type="radio" name="spm4" class="riktig" id="riktigFire"><span class="spanRiktig">16</span><br>
    <input type="radio" name="spm4"> <span>12</span><br>
    <input type="radio" name="spm4"> <span>18</span><br>
    <button id="btnSubmit" type="submit">Svar</button>
</form>

<span id="svar"></span>
<button id="igjen">Prøv igjen!</button>

<script>
    /*Referanser til HTML elementer*/
    let frm = document.getElementById("frm");
    let btnSubmit = document.getElementById("btnSubmit");
    let svar = document.getElementById("svar");
    let riktig = document.getElementsByClassName("riktig");
    let igjen = document.getElementById("igjen");
    let spanRiktig = document.getElementsByClassName("spanRiktig");

    frm.onsubmit = function (evt) {
        evt.preventDefault();
        let h = 0;
        for (let i = 0; i<riktig.length; i++){
            /*Lager ny referanse til element med ID på plass i array og sjekker om denne er krysset av*/
            let x = document.getElementById(riktig[i].id);
            if(x.checked){
                h++; /*Legger til 1 på H hver gang en riktig er krysset av (holder tellingen på hvor mange riktig)*/
                spanRiktig[i].className += " riktigFarge"; /*Setter fargen til de riktige til grønn*/
            }
        }
        if(h === 0){ /*Forskjellige meldinger til brukeren, basert på hvor mange riktige*/
            svar.innerHTML = "Du hadde ingen riktige.";
        }else if(h === riktig.length){
            svar.innerHTML = "Gratulerer, du hadde alle riktig!";
        }else{
            svar.innerHTML = "Gratulerer, du hadde " + h + " riktige svar"
        }

    };
    igjen.onclick = function () { /*Reseter Quizen og setter fargene tilbake til vanlig*/
        frm.reset();
        svar.innerHTML = "";
        for(let j = 0; j<spanRiktig.length; j++){
            spanRiktig[j].classList.remove("riktigFarge");
        }
        for(let i = 0; i<riktig.length; i++){
            riktig[i].style.color = "#000000";
        }
    }
</script>
</body>
</html>