Ingredientes usando if...else, mas deu errado. Alguém saberia o por quê? | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Na minha concepção, para se realizar a varredura na array e não permitir o mesmo ingrediente deveria somente inserir um if...else dentro de uma estrutura de repetição. Mas não rolou. Evitei olhar o gabarito. Segue o código abaixo.

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while( contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        var i = 0
        while (i < ingredientes.length) {

            if (ingrediente != ingredientes[i]) {

                ingredientes.push(ingrediente);
                i++

            } else {
                alert('O ingrediente já foi adicionado, indique outro.')
            }
        }        

        contador++;
    }

    console.log(ingredientes);
</script>

Olá, Carlos! Tudo certo?

Peço desculpas pela demora no retorno.

Vamos imaginar a execução do seu código. Depois de digitarmos o primeiro ingrediente, iremos para a seguinte comparação:

while (i < ingredientes.length) {

            if (ingrediente != ingredientes[i]) {

                ingredientes.push(ingrediente);
                i++

            } else {
                alert('O ingrediente já foi adicionado, indique outro.')
            }
        }

Perceba que o valor de ingredientes.length é zero, logo, nada dentro do while é executado e posteriormente, não temos adição do ingrediente. Ou seja, o contador será incrementado, porém ingredientes.length está sempre com o valor zero.

Além disso, você deve percorrer todo o array para verificar se determinado elemento existe ou não, e, para ter este controle, você pode criar uma variável auxiliar chamada existe para indicar se você deve ou não adicionar determinado elemento na lista de ingredientes.

Outro detalhe é que independente de o ingrediente ser repetido ou não, ao final do código você faz o incremento do contador. Porém, como não queremos contar quando o ingrediente for repetido, vamos incrementar o contador apenas quando o elemento não for repetido.

Fiz umas modificações no seu código e uma abordagem para resolver o problema seria:

<meta charset="UTF-8" />

<h1>Receitas do Yan</h1>

<script>
  var ingredientes = [];

  var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

  var contador = 1;

  while (contador <= quantidade) {
    var ingrediente = prompt("Informe o ingrediente " + contador);

    var i = 0;
    var existe = false;

    while (i < ingredientes.length) {
      if (ingrediente == ingredientes[i]) {
        existe = true;
      }
      i++;
    }

    if (existe == true) {
      alert("O ingrediente já foi adicionado, indique outro.");
    } else {
      ingredientes.push(ingrediente);
      contador++;
    }
  }

  console.log(ingredientes);
</script>

Espero ter te ajudado e qualquer dúvida estou por aqui.

Continue praticando e evoluindo na sua jornada.

Bons estudos e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!