Funcionamento de EventListener inesperada em JavaScript

Estou desenvolvendo um projeto escolar em que temos um setor de avaliações de filmes que funcionam clicando em estrelas. Por enquanto ainda estou testando as funcionalidades separadamente, fazendo apenas com que você clique nas estrelas de 1-5 e ele escreva o numero em uma span. Essa parte funciona normalmente, mas quando clico em qualquer outro lugar da página o conteúdo do span é apagado. A parte de HTML é essa:

                <div class="nota">
                    <i id="nota1" class="fa fa-star" style="font-size: 1.6em;"></i>
                    <i id="nota2" class="fa fa-star" style="font-size: 1.6em;"></i>
                    <i id="nota3" class="fa fa-star" style="font-size: 1.6em;"></i>
                    <i id="nota4" class="fa fa-star" style="font-size: 1.6em;"></i>
                    <i id="nota5" class="fa fa-star" style="font-size: 1.6em;"></i>
                    <span id="media">4.2</span>
                </div>

E o código JavaScript é esse:

var spanNotaAtual = document.querySelector("#media");

var avaliacoes = document.querySelectorAll(".fa-star");

for(i = 0; i < avaliacoes.length; i++){

    addEventListener('click', function(event) {
        event.preventDefault();
        var avaliacao = event.target;
        var idAvaliacao = avaliacao.id;

        var notaDada = verificaNotaDada(idAvaliacao);
        spanNotaAtual.textContent = notaDada;
    })
}


function verificaNotaDada(idAvaliacao) {
    if(idAvaliacao == "nota1") {
        return 1;
    }
    if(idAvaliacao == "nota2") {
        return 2;
    }
    if(idAvaliacao == "nota3") {
        return 3;
    }
    if(idAvaliacao == "nota4") {
        return 4;
    }
    if(idAvaliacao == "nota5") {
        return 5;
    }
}

Depois de pensar um pouco eu resolvi colocar event.preventDefault(), mas não serviu. Alguém poderia me ajudar?