I wonder why this Javascript code is not working (simple program)

Asked

Viewed 175 times

0

var verificador = document.window.getElementById('input#verificador');
var nacionalidade = document.window.getElementById('div#nacionalidade');

function verificar() {

  if (verificador == 'brasil' || verificador == 'BRASIL' || verificador == 'Brasil') {
    nacionalidade.innerText = 'Você é brasileiro';

  } else {

    nacionalidade.innerText = 'Você é estrangeiro';

  }
}
<body>
  <h1>Teste de nacionalidade</h1>
  Digite o país que você nasceu:<input type="text" name="verificador" id="verificador" />
  <input type="button" value="Clique e descubra sua nacionalidade " onclick="verificar()" />
  <div id="nacionalidade">Nacionalidade</div>


</body>

javascript html dom javascript-events

  • Note: if the id of the element is verificador, you must use getElementById('verificador'). The value 'input#verificador' would make sense only to use with the querySelector.

  • That said, what should be document.window?

2 answers

5

Your code is several errors, that line is wrong.

var verificador = document.window.getElementById('input#verificador');
var nacionalidade = document.window.getElementById('div#nacionalidade');

You can’t put the window after document and the getElementById cannot select selectors other than querySelector he only accepts the name of id.

var verificador = window.document.getElementById('verificador');
var nacionalidade = window.document.getElementById('nacionalidade');

And on the part of if you’re not comparing the value which is the value of input with id="verificador"

if (verificador == 'brasil' || verificador == 'BRASIL' || verificador == 'Brasil') 
{
   nacionalidade.innerText = 'Você é brasileiro';

}

Just put the value in front of verificador.

if (verificador.value == 'brasil' || verificador.value == 'BRASIL' || verificador.value == 'Brasil')
{
   nacionalidade.innerText = 'Você é brasileiro';

}

Ready! That’s it, now it’s working perfectly.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <h1>Teste de nacionalidade</h1>
    Digite o país que você nasceu:<input type="text" name="verificador" id="verificador"/>
    <input type="button" value="Clique e descubra sua nacionalidade " onclick="verificar()"/>
    <div id="nacionalidade">Nacionalidade</div>


<script>
 
    var verificador = window.document.getElementById('verificador');
    var nacionalidade = window.document.getElementById('nacionalidade');
    
    function verificar() {
        
        if (verificador.value == 'brasil' || verificador.value == 'BRASIL' || verificador.value == 'Brasil') {
            nacionalidade.innerText = 'Você é brasileiro';
        } else {
            nacionalidade.innerText = 'Você é estrangeiro';
        }
    }
           
   </script>

</body>
</html>

4

Some mistakes:

  • the getElementById wants only the ID, as you have input#verificador is a full CSS selector and can work for example with the `querySelector``
  • uses Document only and not`Document.window``
  • uses .value to extract the input value
  • put the var inside the function to avoid cases where Javascript is read before HTML is interpreted. Thus it is also more encapsulated
  • used the .toLowerCase to accept large and small letters

function verificar() {
  var verificador = document.getElementById('verificador').value;
  var nacionalidade = document.getElementById('nacionalidade');
  if (verificador.toLowerCase() == 'brasil') {
    nacionalidade.innerText = 'Você é brasileiro';
  } else {
    nacionalidade.innerText = 'Você é estrangeiro';
  }
}
<h1>Teste de nacionalidade</h1>
Digite o país que você nasceu:<input type="text" name="verificador" id="verificador" />
<input type="button" value="Clique e descubra sua nacionalidade " onclick="verificar()" />
<div id="nacionalidade">Nacionalidade</div>

Browser other questions tagged javascript html dom javascript-events

You are not signed in. Login or sign up in order to post.