JSFiddle - React, Tailwind, and code Playground

HTML

<form >

        <p><label for="name">NICKNAME</label>
            <input type="text" name="username" value="o teu nome" />
        
        <fieldset id="dificuldade">
            <legend>Dificuldade:</legend>
            <input type="radio" name="dificuldade" value="facil"> Fácil </input>
            <input type="radio" name="dificuldade" value="medio"> Médio </input>
            <input type="radio" name="dificuldade" value="dificil"> Difícil </input>
        </fieldset>
        
        <fieldset id="tipo">
            <legend>Tipo de jogo:</legend>
            <input type="radio" name="Tipodejogo" value="somar"> Somar </input>
            <input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
            <input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
            <input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
        </fieldset>
        
        <input type="button" value="Começa" id="button" ></input>
    </form>
            <br />
            <br />
            <p>Selected Values:</p>
            <div id="output"></div>
            <div id="output2"></div>

JavaScript

document.getElementById('button').onclick = function() {
    
    var dif = document.getElementById('dificuldade');
    var tip = document.getElementById('tipo');
    
    var curr = dif.firstChild;
    var tdj = tip.firstChild;
    
    while (curr != null) {
        if (curr.checked) {
            break;
        }
        curr = curr.nextSibling;
    }
    while (tdj != null) {
        if (tdj.checked) {
            break;
        }
        tdj = tdj.nextSibling;
    }
    document.getElementById('output').innerHTML = curr.value;
    document.getElementById('output2').innerHTML = tdj.value;
};