Ajuda com acumulador

Estou tentando criar um sistema com 3 botões. O primeiro executa uma função que gera um array (números da aposta) com números aleatórios de 1 a 60. O segundo gera também outro array (números do resultado) com número aleatórios. O terceiro botão, supostamente deveria examinar um a um dos itens do primeiro array, compará-lo ao segundo array e, no caso de serem iguais, adicionar esse número a um terceiro array (números que a pessoa acertou). Esse terceiro botão, no entanto, adiciona o número ao array junto com "undefined". Ex. Array[32, undefined] O que está errado com o código? Segue o código:

<meta charset="UTF-8">

<input type="submit" value="Gerar Bilhete" id="lotteryCard"/>
<input type="submit" value="Sorteados" id="vencedor"/>
<input type="submit" value="Resultado" id="resultado"/>

<script>

var winningNumbers = [];
var lotteryNumbers = [];
var resultNumbers = [];

var gerarNumerosLoteria = function() {
    for (var i=0; i < 6; i++) {
        var numero = Math.round(Math.random() * 60);
        lotteryNumbers.push(numero);
    }
    console.log(lotteryNumbers);
}
var gerarNumerosVencedores = function () {
    for (var i=0; i < 6; i++) {
        var numero = Math.round(Math.random() * 60);
        winningNumbers.push(numero);
    }
    console.log(winningNumbers);
}

var resultadoLoteria = function() {
    for(var i=0; i<=lotteryNumbers.length; i++) {
        for(var j=0; j<=winningNumbers.length; j++) {
            if(lotteryNumbers[i] == winningNumbers[j]) {
                resultNumbers.push(lotteryNumbers[i]);
            }
        }
    }
    console.log(resultNumbers);
}

var numeroBilhete = document.getElementById('lotteryCard');
numeroBilhete.onclick = gerarNumerosLoteria;

var numeroVencedor = document.getElementById('vencedor');
numeroVencedor.onclick = gerarNumerosVencedores;

var numeroResultado = document.getElementById('resultado');
numeroResultado.onclick = resultadoLoteria;

</script>