Gostaria de saber como ficaria o código se fosse para inserir os ingredientes em um input e a cada clicar de um botão ao lado do input os ingredientes fossem sendo armazenados. Mantendo-se a condição de não poder haver ingredientes repetidos.
Solucionado
Gostaria de saber como ficaria o código se fosse para inserir os ingredientes em um input e a cada clicar de um botão ao lado do input os ingredientes fossem sendo armazenados. Mantendo-se a condição de não poder haver ingredientes repetidos.
Olá Thiago!
Usando o que foi ensinado nas aulas pelo professor Flavio, você poderia fazer dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Incluindo ingredientes com input e button</title>
</head>
<body>
<h1>Receitas do Yan</h1>
<input />
<button>Adicionar</button>
<script>
var ingredientes = [];
var input = document.querySelector("input");
input.focus();
function adiciona() {
var existe = false;
for (var posicao = 0; posicao < ingredientes.length; posicao++) {
if (ingredientes[posicao] == input.value) {
existe = true;
break;
}
}
if (existe == false) {
ingredientes.push(input.value);
}
input.value = "";
input.focus();
console.log(ingredientes);
}
var button = document.querySelector("button");
button.onclick = adiciona;
</script>
</body>
</html>Ou poderia modificar de acordo com sua necessidade.
Espero que tenha ajudado!