Entrar Ainda não tem acesso?
1
resposta

mais duvidas 9

por Jorge Henrique Nicolau da Silva
| 76.8k xp | 95 posts

Eu tou tentando programar os dados de um sites mas estou tendo dificuldade, irei passa os dados pra que vocês me dica onde eu estou errando

var país = 'França' 
 console.log(`Vivendo em ${país}`)
if (país == 'Brasil'){
    console.log('Você é Brasileiro!')
}else {
    console.log('Você é Estrangeiro')
}

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suas nacionalidades</title>
</head>
<body>
   <h1>Sua nacionalidade</h1>
   <input type="number" name="txtPaís" id="txtPaís"> 
   <input type="button" value="verificar" onclick="mostrar()"></input>
   <div id="nação"></div>
   <script>
     
       function mostrar() {
          var txtv = document.getElementById('txtPaís')
          var nação = document.querySelector('div#nação') 
          var país  = Number(txtv.value)
          nação.innerHTML = `Sua situação atual é de <strong>${país}</strong>`

       } 

   </script>
</body>
</html>
1 resposta
por Lorena Garcia
| 12833.7k xp | 19196 posts
Alura Scuba Team

Oii, Jorge.

Entendo perfeitamente a dúvida. É muito comum, quando estamos começando a manipular o DOM (os elementos da página), confundirmos como o computador deve tratar o que o usuário digita: se é um texto ou um número.

Identifiquei três pontos principais que estão impedindo o funcionamento correto:

  1. Tipo do Input: O campo de entrada está definido como type="number". Como nomes de países são textos, o correto é type="text". Se deixarmos como número, o usuário nem conseguirá digitar "Brasil".
  2. Conversão de dados: Na linha var país = Number(txtv.value), o código está forçando o que foi digitado a virar um número. Se o usuário digitar "Brasil" e tentarmos transformar em número, o resultado será NaN (Not a Number/Não é um número). Precisamos pegar o valor como texto (String).
  3. Lógica fora da função: A lógica de validação (if (país == 'Brasil')...) está fora da função mostrar(). Isso significa que ela roda assim que a página carrega (quando a variável país ainda está vazia ou indefinida), e não quando o botão é clicado.

Código com correções:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suas nacionalidades</title>
</head>
<body>
    <h1>Sua nacionalidade</h1>
    <input type="text" name="txtPaís" id="txtPaís"> 
    <input type="button" value="verificar" onclick="mostrar()">
    <div id="nação"></div>

    <script>
        function mostrar() {
            var txtv = document.getElementById('txtPaís')
            var nação = document.querySelector('div#nação') 
            
            // Correção 2: Removemos o Number() para pegar o texto puro
            var país = txtv.value 
            
            nação.innerHTML = `<p>Sua situação atual é de <strong>${país}</strong></p>`

            // Correção 3: Trazemos a lógica para dentro da função
            if (país == 'Brasil' || país == 'brasil') { // Dica extra: aceitar minúsculas também
                nação.innerHTML += '<p>Você é Brasileiro!</p>'
            } else {
                nação.innerHTML += '<p>Você é Estrangeiro</p>'
            }
        } 
    </script>
</body>
</html>

O que mudou:

  • type="text": Agora o campo aceita letras.
  • txtv.value: Pegamos o valor direto, sem transformar em número.
  • Estrutura condicional (if/else): Colocamos dentro da função mostrar() para que a verificação aconteça apenas após o clique no botão.

Essa estrutura vai garantir que o programa leia o nome do país e dê a resposta correta!

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA