[RESOLVIDO] Erro no javascript Cannot set property 'onclick' of undefine

Front-end
#1

Boas colegas. Estou com um problema que não estou a conseguir solucionar. Bem, estava a seguir um tutorial que gostaria de aplicar no meu projecto na qual explica como criar a funcionalidade de ter duas línguas no website, do tipo mudar de português para inglês e vice-versa. Fui seguindo o video e até traduz sim, mas a função que permite fazer o reload da página dá, o seguinte erro:
Uncaught TypeError: Cannot set property ‘onclick’ of undefined

Abaixo deixo o código:

...
<body>
    <a href="#eng" data-reload>English</a>
    <a href="#es" data-reload>Espanhol</a>

    <p id="hi">
        Welcome everyone!
    </p>

    <script>
        // define language reload anchors
        var dataReload = document.querySelectorAll("[data-reload]");
        var hi = document.querySelector("#hi");
        // language translation
        var language = {
            eng: {
                welcome: "Welcome everyone!"
            },
            es: {
                welcome: "Bienvenidos todos!"
            }
        };


        //Define language via window hash
        if(window.location.hash){
            if(window.location.hash === "#es"){
            hi.textContent = language.es.welcome;
            
            }
        }
 
        // define language reload onclick iliteration
        for (i = 0; i <= dataReload.length; i++) {
           dataReload[i].onclick = function() {
            window.location.reload(true);
           };
        }
    </script>


</body>
...

O erro aponta para a seguinte linha:

dataReload[i].onclick = function() {

Ou seja apenas é feita a tradução quando faço a atualização da página. E no tutorial essa função supostamente que é que iria fazer. O que devo fazer para poder ultrapassar este problema? Alguma dica? Abaixo deixo o link do video no youtube:

[https://www.youtube.com/watch?v=PaJrDAmrOB4&t=337s]

#2

No for vc tava botando <=, então ele tava pegando um outro índice null

Testa agora:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>
    <a href="#eng" data-reload>English</a>
    <a href="#es" data-reload>Espanhol</a>

    <p id="hi">
        Welcome everyone!
    </p>

    <script>
        // define language reload anchors
        var dataReload = document.querySelectorAll("[data-reload]");
        var hi = document.querySelector("#hi");

        // language translation
        var language = {
            eng: {
                welcome: "Welcome everyone!"
            },
            es: {
                welcome: "Bienvenidos todos!"
            }
        };

        //Define language via window hash
        if (window.location.hash) {
            if (window.location.hash === "#es") {
                hi.textContent = language.es.welcome;
            }
        }

        // define language reload onclick iliteration
        for (i = 0; i < dataReload.length; i++) {
            console.log(dataReload[i])
            dataReload[i].onclick = function () {
                reloadPage()
            };
        }

        function reloadPage() {
            setTimeout(function () {
                location.reload();
            }, 100);
        }
    </script>

</body>
</html>
#3

Obrigado acabei achando a mesma solução em relação à função para realizar o reload…
O código acabou ficando assim:

 <script>
        // define language reload anchors
        var dataReload = document.querySelectorAll("[data-reload]");
        var hi = document.querySelector("#hi");
        // language translation
        var language = {
            eng: {
                welcome: "Welcome everyone!"
            },
            es: {
                welcome: "Bienvenidos todos!"
            }
        };


        //Define language via window hash
        if (window.location.hash) {
            if (window.location.hash === "#es") {
                hi.textContent = language.es.welcome;

            }
        }

        // define language reload onclick iliteration
        for (i = 0; i <= dataReload.length; i++) {
            dataReload[i].onclick = function () {
                // location.reload();
                setTimeout(function () {
                location.reload();
            }, 100);
            };
        }


    </script>
#4

Mas não entendi a diferença em usar o setTimeout

#5

Acho que ele tava adicionando o hash e atualizando ao mesmo tempo, ou até antes de adicionar o Hash, então o setTimeout faz o sistema esperar 100 milésimos antes de dar o refresh. Aí sim funciona.

#6

Hmm okkey… Thanks