Olá!

Estou no fim do Lógica de Programação I, então resolvi criar um projeto aparte para praticar. Me surgiu uma dúvida: como criar dois botões que são funcionais? Minha situação é a seguinte: criei dois botões HTML ("Ovo" e "Arroz"). Criei a variável "buttonOvo" e o fiz chamar uma função que eu criei (receitaOvo):

var buttonOvo = document.querySelector("button");

    buttonOvo.onclick = receitaOvo;

Porém, ao criar outra variável ("buttonArroz") e usar a mesma instrução, o "buttonOvo" deixa de executar a função e passa a executar a mesma que o "buttonArroz". Então, como fazer com que ele leia uma instrução para cada botão?

Esse é o código completo que estou experimentando:

<meta charset="UTF-8">

<h2>Selecione o ingrediente.</h2>

<button>Ovo</button> <br><br>
<button>Arroz</button> <br><br>

<script>

    function pulaLinha() {
        document.write("<br><br>");
    }

    function mostra(info) {
        document.write(info);
        pulaLinha();
    }

    function receitaOvo() {
        var sabor = prompt("Você prefere uma receita doce ou salgada?");

        if(sabor == "salgado", sabor == "salgada") {

            mostra("Você pode fazer um omuraisu.");
        } 

        if(sabor == "doce") {

            var farinha = prompt("Você tem farinha?");
            if(farinha == "sim") {

                mostra("Você pode fazer um bolo.");
            } 

            if(farinha == "não", farinha == "nao") {

                mostra("Você pode fazer uma gemada.");
            }

        } 
    }

    function receitaArroz() {
        var legumes = prompt("Você tem legumes?");

        if(legumes == "sim") {
            mostra("Você pode fazer um arroz festivo.");
        } else {
            mostra("Você pode fazer um arroz comum.");
        }
    }

    var buttonOvo = document.querySelector("button");

    buttonOvo.onclick = receitaOvo;

    var buttonArroz = document.querySelector("button");

    buttonArroz.onclick = receitaArroz;


</script>