JavaScript - If Else, me ajuda?

Front-end
#1

Olá esse é meu primeiro Tópico…
Estou iniciando no Javascript e estou com um probleminha, é o seguinte…
Criei esse input - text para digitar o nome de uma flor, com JS eu criei dois Arrays, um com o nome das flores e o outro com as imagens: If a flor que digitou tiver no Array, então mostrar ela, Else apareça uma mensagem dizendo: “Essa flor ainda não está no catálogo!”

Meu probema é o seguinte, se eu tirar o Else ele mostra a imagem certinho, mas se eu coloco o Else ele não mostra nenhuma imagem (mesmo que tenha), só fica aparecendo a Mensagem como se não tivesse a flor.

Desde já obrigado pessoal!

<!DOCTYPE html>
Exercicio Array 
<style type="text/css">
	img {
		width: 100px;
	}
</style>

<div id="demo"></div>

<div>
	<input type="text" placeholder="Digite o nome da flor..." id="campo">
	<button id="buscar" onclick="search()">Enviar</button>
</div>


<script type="text/javascript">
	var floresArray = ["amor-perfeito","choroes","cravo","dedaleira","hortensia","malmequer","orquidea","rosa","sardinheira","tulipa"];

	var floresArrayIMG = [];
	floresArrayIMG[0] = "<img src='amor-perfeito.jpg'>";
	floresArrayIMG[1] = "<img src='choroes.jpg'>";
	floresArrayIMG[2] = "<img src='cravo.jpg'>";
	floresArrayIMG[3] = "<img src='dedaleira.jpg'>";
	floresArrayIMG[4] = "<img src='hortensia.jpg'>";
	floresArrayIMG[5] = "<img src='malmequer.jpg'>";
	floresArrayIMG[6] = "<img src='orquidea.jpg'>";
	floresArrayIMG[7] = "<img src='rosa.jpg'>";
	floresArrayIMG[8] = "<img src='sardinheira.jpg'>";
	floresArrayIMG[9] = "<img src='tulipa.jpg'>";
	

	function search() {
		for (var i = 0; i < 10; i++) {
			var getCampo = document.getElementById('campo').value;
			if (getCampo == floresArray[i]) {
				document.getElementById('demo').innerHTML = floresArrayIMG[i];
			} else {
				document.getElementById('demo').innerHTML = "Essa flor ainda não está no catálogo!";
			}
		}
	}
</script>
#2

Se for informado um nome de flor, e essa flor for o primeiro item do array, ele vai encontrar a flor, pegar e mostrar a imagem, porém, vai continuar pesquisando pela flor e, claro, não vai encontrar e, consequentemente, vai apresentar o texto que a flor não está no catálogo.

Para arrumar isso, vc deve parar o for quando a flor for encontrada:

for (var i = 0; i < 10; i++) {
	var getCampo = document.getElementById('campo').value;
	if (getCampo == floresArray[i]) {
		document.getElementById('demo').innerHTML = floresArrayIMG[i];
		break; // <-- essa palavra-chave interrompe a execução do FOR
	} else {
		document.getElementById('demo').innerHTML = "Essa flor ainda não está no catálogo!";
	}
}
1 curtida
#3

Nossa… simples, verdade tinha esquecido desse break kkk… Obrigado mesmo!

1 curtida