JSFiddle - React, Tailwind, and code Playground

HTML

<form>

        <p><label for="name">NICKNAME</label>
            <input type="text" name="username" value="o teu nome" />
    </p>
        <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.getElementsByName('dificuldade');
    var tip = document.getElementsByName('Tipodejogo');

    var difValue;
    for (var i = 0; i < dif.length; i++) {
        if (dif[i].type === "radio" && dif[i].checked) {
            difValue = dif[i].value;
        }
    }

    var tipValue;
    for (var i = 0; i < tip.length; i++) {
        if (tip[i].type === "radio" && tip[i].checked) {
            tipValue = tip[i].value;
        }
    }

    document.getElementById('output').innerHTML = difValue;
    document.getElementById('output2').innerHTML = tipValue;
};