1
resposta

Duvida input

Olá,

queria saber o que tá errado neste código, quando aperto ok no botão, não funciona

estou tendo bastante dificuldade de aplicar algumas coisas que teoricamente já aprendi

`

Bem vindo(a) a lista!

Quantos ingredientes você vai adicionar?

1 resposta

Olá, Gabriela, tudo bem?

Nos desculpe a demora para te dar uma resposta.

Primeiro de tudo: é normal sentir dificuldades! No universo da programação, tudo pode parecer muito novo e desafiador. O segredo é conhecer o seu próprio ritmo de aprendizado e revisar os conceitos mais importantes.

E colocar os conhecimentos em prática é um ótimo caminho! Continue assim que com certeza você irá se acostumando com alguns conceitos. Se mesmo assim você sentir que continua tendo dificuldades em absorver os aprendizados, o curso de aprender a aprender pode te ajudar.

Agora vamos ao código!


Não sei se apenas não apareceu no seu post, mas nós sempre devemos fechar a tag <script> depois de terminarmos o código JS, com </script>, senão o código não funcionará.

O próximo ponto é: nunca devemos declarar uma função dentro de um while! Na verdade, deveria ter sido o contrário: primeiro declaramos a função verificar, e dentro dela nós utilizamos o while, que vai controlar quantas vezes o prompt "Informe o ingrediente x" deve aparecer.

Ou seja, todos os processos de verificações devem acontecer dentro da função verificar. Por fim, essa função deve ser chamada quando clicarmos no botão.

Então vou reescrever seu código JS para o seguinte:

  var ingredientes = [];
  var contador = 1;
  var input = document.querySelector("input");
  input.focus;
  var button = document.querySelector("button");
  button.onclick = verifica;


  function verificar() {  // toda a lógica de verificações ficará dentro dessa função
    while (contador <= input.value) {

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

      var existe = false;

      for (var posicao = 0; posicao < ingredientes.length; posicao++) {

        if (ingredientes[posicao] == ingrediente) {

          existe = true;
          break;
        }
      }

      if (existe == false) {

        ingredientes.push(ingrediente);
        contador++;
      }
      var button = document.querySelector("button");
      button.onclick = verifica;

    }

  }

  console.log(ingredientes);

O próximo ponto é: há uma repetição das duas linhas de código abaixo em duas partes diferentes do programa:

      var button = document.querySelector("button");
      button.onclick = verifica;

Uma delas está dentro da função verificar, mas não precisamos dela, então vamos retirá-la, ok?

Além disso, nesse código, button.onclick está recebendo o nome verifica, quando deveria ser verificar, com "r" no final, senão o programa não vai reconhecer a função que você declarou.

O código agora fica assim:

  var ingredientes = [];
  var contador = 1;
  var input = document.querySelector("input");
  input.focus;
  var button = document.querySelector("button");
  button.onclick = verificar;  // alterei o nome para "verificar"


  function verificar() {  // toda a lógica de verificações ficará dentro dessa função
    while (contador <= input.value) {

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

      var existe = false;

      for (var posicao = 0; posicao < ingredientes.length; posicao++) {

        if (ingredientes[posicao] == ingrediente) {

          existe = true;
          break;
        }
      }

      if (existe == false) {

        ingredientes.push(ingrediente);
        contador++;
      }

        // retirei a repetição do código daqui
    }

  }

  console.log(ingredientes);

E agora o código na verdade já está funcional! O único problema é que depois que digitamos todos os ingredientes, o código console.log(ingredientes); não está sendo executado. Mas é apenas porque ele está fora da função verificar, vamos colocá-lo lá dentro:

  var ingredientes = [];
  var contador = 1;
  var input = document.querySelector("input");
  input.focus;
  var button = document.querySelector("button");
  button.onclick = verificar;  // alterei o nome para "verificar"


  function verificar() {  // toda a lógica de verificações ficará dentro dessa função
    while (contador <= input.value) {

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

      var existe = false;

      for (var posicao = 0; posicao < ingredientes.length; posicao++) {

        if (ingredientes[posicao] == ingrediente) {

          existe = true;
          break;
        }
      }

      if (existe == false) {

        ingredientes.push(ingrediente);
        contador++;
      }

        // retirei a repetição do código daqui
    }
        console.log(ingredientes);  // movi o "console.log" para cá
  }

Pronto! Agora conseguimos mostrar a lista no console depois de digitar.

Espero te ajudado! Abraços e bons estudos :)