Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Como conectar dois Arrays para vincular país e nacionalidade

por Henrique
| 77.6k xp | 16 posts

Comecei meu código com algo simples, para verificar se a pessoa digitasse 'Brasil' diria que é brasileiro, caso contrário diria que era estrangeiro. Mas queria expandir meu código para que a pessoa possa digitar o nome de um país e que apareça a nacionalidade daquele país: Canadá > Canadense.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nacionalidades</title>
</head>
<body>
    <label for="pais">Descubra as Nacionalidades</label>
    <input type="text" id="pais" placeholder="Digite o país que tem curiosidade..." required>

    <button id="descubra" >Descubra</button>

    <p id="resultado"></p>

    <script>
        descubra.addEventListener("click", function(event) {
            event.preventDefault();
            const txtPais = document.getElementById('pais');
            const pais = String(txtPais.value);
            const descubra = document.getElementById('descubra');
            const resultado = document.getElementById('resultado');

            function nacionalidades(pais){
                const nomePaises = ['Afeganistão','Andorra', 'Angola','Antígua e Barbuda','Argélia','Argentina','Armênia','Austrália','Áustria','Azerbaijão','Bahamas','Bangladesh','Barbados']
                ;
            };

            let nomePais = nomePaises.indexOf(pais)

                while(pais == nomePais) {
                    let nacionalidades = ['Afegão','Andorrano','Angolano','Antiguano','Argelino','Argentino','Armênio','Australiano','Austríaco','Azeri','Bahamense','Bangladês','Barbadiano']
                 return resultado.innerHTML = `A nacionalidade de ${nomePais}é ${nacionalidade}`;
                break;
                }

            }

        });
    </script>
</body>
</html>
5 respostas
solução!
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Fala Henrique, Tudo certo?

Retirei uma } que estava sendo colocada a mais. Ela estava no final do código.

Retirei o código abaixo de dentro do addEventListener para setar a variável antes do evento.

const descubra = document.getElementById('descubra');

Não entendi a implementação da função 'function nacionalidades(pais)' com a passagem de parâmentro e retornando uma const. Caso queira discutir o racional por trás dessa tentativa, fala para entendermos.

Retirei a função nacionalidades e implementei as arrays de paises e nacionalidades dentro do evento de click.

Retirei a implementação do laço while. Não consegui entender o motivo do laço ali.

No código você já acha a posição do País dentro da sua array. Caso você coloque na mesma ordem, as nacionalidades, pode aproveitar a mesma posição.

Vai achar o País com nomePaises[nomePais]

Vai achar a Nacionalidade com nacionalidades[nomePais]

Segue o código que consegui refatorar.

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nacionalidades</title>
</head>

<body>
    <label for="pais">Descubra as Nacionalidades</label>
    <input type="text" id="pais" placeholder="Digite o país que tem curiosidade..." required>

    <button id="descubra">Descubra</button>

    <p id="resultado"></p>

    <script>
        const descubra = document.getElementById('descubra');
        descubra.addEventListener("click", function (event) {
            event.preventDefault();
            const txtPais = document.getElementById('pais');
            const pais = String(txtPais.value);
            const resultado = document.getElementById('resultado');


            const nomePaises = ['Afeganistão', 'Andorra', 'Angola', 'Antígua e Barbuda', 'Argélia', 'Argentina', 'Armênia', 'Austrália', 'Áustria', 'Azerbaijão', 'Bahamas', 'Bangladesh', 'Barbados'];
            const nacionalidades = ['Afegão', 'Andorrano', 'Angolano', 'Antiguano', 'Argelino', 'Argentino', 'Armênio', 'Australiano', 'Austríaco', 'Azeri', 'Bahamense', 'Bangladês', 'Barbadiano']

            let nomePais = nomePaises.indexOf(pais)

            resultado.innerHTML = `A nacionalidade de ${nomePaises[nomePais]} é ${nacionalidades[nomePais]}`;

        });
    </script>
</body>

</html>
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Henrique,

Adicionei uma verificação com o IF para validar se foi digitado algum país ou se o país digitado está na lista previamente cadastrada na lista.

    <script>
        const descubra = document.getElementById('descubra');
        descubra.addEventListener("click", function (event) {
            event.preventDefault();
            const txtPais = document.getElementById('pais');
            const pais = String(txtPais.value);
            const resultado = document.getElementById('resultado');


            const nomePaises = ['Afeganistão', 'Andorra', 'Angola', 'Antígua e Barbuda', 'Argélia', 'Argentina', 'Armênia', 'Austrália', 'Áustria', 'Azerbaijão', 'Bahamas', 'Bangladesh', 'Barbados'];
            const nacionalidades = ['Afegão', 'Andorrano', 'Angolano', 'Antiguano', 'Argelino', 'Argentino', 'Armênio', 'Australiano', 'Austríaco', 'Azeri', 'Bahamense', 'Bangladês', 'Barbadiano']

            let nomePais = nomePaises.indexOf(pais)

            if (pais.length == 0 || nomePais < 0) {
                resultado.innerHTML = 'Não foi digitado o País ou é um País inválido'

            } else {
                resultado.innerHTML = `A nacionalidade de ${nomePaises[nomePais]} é ${nacionalidades[nomePais]}`;
            }

        });
    </script>
por Henrique
| 77.6k xp | 16 posts

Muito obrigado, agora poderei prosseguir com esse projeto, aquelas coisas que estavam no código que não faziam tanto sentido eram minhas tentativas, ontem fiquei algumas horas testando coisas. Você me ajudou muito, depois que eu terminar o projeto vou compartilhar no github. Você poderia me explicar um pouco mais sobre essa lógica e como ela funciona:

let nomePais = nomePaises.indexOf(pais)
por Eraldo Sinicio da Silva Filho
| 228.2k xp | 225 posts

Henrique... Muito bom.

Vou tentar te explicar por texto.

nomePaises é a Array que você está armazenando todos os paises que quer ter... O método indexOf é nativo do JavaScript e ele retorna qual é a posição, dentro do array, do parâmetro passado.

Neste caso estamos passando a variável "pais" como parâmetro.

Caso o pais não exista na lista nomePaises, a variável nomePais receberá o valor -1. Esse valor será retorna sempre que o indexOf não achar o parâmetro na lista de pesquisa.

Caso exista, o a variável nomePais recebe qual é a posição, dentro da array nomePaises, do parâmetro passado.

Com a posição do país armazenada, você pode acessar dados específicos nas listas passando a posição na determinada array usando nomeDaLista[posicao]. Trazendo pro teu código fica nacionalidades[nomePais].

Podemos melhorar um pouco o nome das variáveis para não confundirmos a leitura.

    <script>
        const descubra = document.getElementById('descubra');
        descubra.addEventListener("click", function (event) {
            event.preventDefault();
            const txtPais = document.getElementById('pais');
            const pais = String(txtPais.value);
            const resultado = document.getElementById('resultado');


            const nomePaises = ['Afeganistão', 'Andorra', 'Angola', 'Antígua e Barbuda', 'Argélia', 'Argentina', 'Armênia', 'Austrália', 'Áustria', 'Azerbaijão', 'Bahamas', 'Bangladesh', 'Barbados'];
            const nacionalidades = ['Afegão', 'Andorrano', 'Angolano', 'Antiguano', 'Argelino', 'Argentino', 'Armênio', 'Australiano', 'Austríaco', 'Azeri', 'Bahamense', 'Bangladês', 'Barbadiano']

            let posicaoPais = nomePaises.indexOf(pais)

            if (pais.length == 0 || posicaoPais < 0) {
                resultado.innerHTML = 'Não foi digitado o País ou é um País inválido'

            } else {
                resultado.innerHTML = `A nacionalidade de ${nomePaises[posicaoPais]} é ${nacionalidades[posicaoPais]}`;
            }

        });
    </script>

Qualquer dúvida, questionamento ou sugestão, só falar.

por Henrique
| 77.6k xp | 16 posts

Ajudou muito mesmo, já estou fazendo o layout e implementando novas funcionalidades. Obrigado novamente, vida longa e próspera!