Como fazer uma média com os valores vindos de um form e manter ela no HTML

Oi pessoal!

Fiz um site de exemplo durante o curso de html e css, ele ficou como eu queria. Porém como é só o HTML e o CSS, eu não consigo alterar umas partes que eu quero que altere. Vou explicar melhor:

O site mostra duas médias em dois blocos principais do site, e está lindo no site:

<ul class="valores">
    <li>
        <p class="titulo">Média Brasil*</p>
        <p id="mediaBrasil" class="valor">R$ 1,30</p>
        <p class="obs">*valores baseados nas respostas recebidas pelo site.</p>
    </li>
    <li>
        <p class="titulo">Maior valor*</p>
        <p id="maiorValor" class="valor">R$ 2,10</p>
        <p class="obs">*valores baseados nas respostas recebidas pelo site.</p>
    </li>
</ul>

Porém, os dois valores foram colocados só de exemplo. Eu queria tornar esse 1,3 e o 2,10 em variáveis vindas de um formulário que o usuário digita. Obs: Na verdade é pra ser uma média, mas por enquanto só testei colocar o mesmo número digitado no formulario.

Seguem as classes/IDs do campo preenchido e do botão em HTML:

<form>
<fieldset>
.
.
.
<!-- local que o usuário coloca o valor -->
<div class="valorR_div">
    <label for="valorRecebido">R$:</label>
    <input id="valor1" class="valorR" nome="valor1" type="text" required placeholder="0,00" maxlength="3"    minlength="3" onkeypress="$    (this).mask('R$ #.##0.00', {reverse: true});"/>    
</div>`
.
.
.
<!-- botão que aciona a função teste() -->
<input type="button" value="Enviar" class="b_armazenar" id="button"  onClick="teste()"/>
.
.
.
</fieldset>
</form>

A Função, teste(), que o Botão chama em JavaScript, está funcionando e é a seguinte:

function teste(){
    var estado = document.form_1.ufR.value;
    valorRecebido = parseFloat(document.form_1.valor1.value);
    var mesReferencia = document.form_1.mesR.value;
    // console.log(estado, valorRecebido, mesReferencia); 

    document.getElementById("mediaBrasil").innerHTML = `<p id=\"mediaBrasil\" class=\"valor\">R$ ${valorRecebido}</p>`;
    document.getElementById("maiorValor").innerHTML = `<p id=\"maiorValor\" class=\"valor\">R$ ${valorRecebido}</p>`;
 }

Agora eu estou travada porque não consigo nem imaginar como essas variáveis quando eu atualizo a página. Como que eu posso fazer uma média ficar no site se apaga todos os dados que já me enviaram?

Inclusive estou perdida em saber qual é o melhor curso pra eu fazer agora, se eu consigo continuar trabalhando em JavaScript, se tenho que fazer um curso de banco de dados.

Então até apontando a direção que eu tenho que ir, eu to aceitando! hehe