Doubt if/Else (Javascript)

Asked

Viewed 58 times

0

I’m starting to study programming and JavaScript I had an obstacle with the if/else.

In the code, the if always performs, but the else no, I’ve made several modifications (including adding the addEventListener in the JavaScript to call the event of click) but never runs the whole code, where I’m missing?

Follows the code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nacionalidade</title>
</head>
<body>
  <h1>BRASILEIRO OU ESTRANGEIRO?</h1>
  Digite o seu país de origem:<input type="text" name="pais" id="pais">
  <input type="button" value="Verificar" onclick="clique()">
  <script>
    function clique(){
      let pais='Basill'
      if(pais!=='Brasil'){
        alert(`Você é ESTRANGEIRO!`)
      } else{
        alert(`Você é BRASILEIRO`)
      }
    }
  </script>
</body>
</html>
  • that code falls on else I didn’t understand the doubt

  • what is the problem? already seen that by fixing a value in the variable parents will always enter in Else?

  • your doubt is because you have the text box to type the country?

  • 2

    If the variable pais never changes, your program will always behave the same way. There is a logical flaw there. Note that at no time do you collect the value the user entered in the input. To do this let pais = document.getElementById('pais').value.

  • Basill will always be different from Brazil.

  • Thanks for the help I understood where I went wrong at first but this is the only logic error? Because I continue with the same problem.

Show 1 more comment

1 answer

1

As mentioned by the @Yoyo user in the comment, its variable never changes value. So, it will never fall into a different condition.

Since you need to redeem the value of the element input id pais, you can do it one of two ways:

let elementoPais = document.getElementById('pais');

or

let elementoPais = document.querySelector('#pais');

The difference visual between the two is that in the second example (using the method querySelector) an ID is searched from the character # as a prefix. Using getElementById as an example to understand what happens:

  • document -> page
  • .getElementById("pais") -> search for an element by its attribute id where the value is "pais";

In this case we will have access to the element as a variable in the script:

let elementoPais = document.getElement...

By having an object that represents the element on the page, we can access its value. For this we have the property value (value):

elementoPais.value

The property cited returns what is inside the field, that is, its value. Thus, its condition would work:

function clique() {
  let elementoPais = document.getElementById('pais'); // Buscando o elemento pelo ID
  let pais = elementoPais.value; // Acessando seu valor
  if (pais !== 'Brasil') {
    alert(`Você é ESTRANGEIRO!`);
  } else{
    alert(`Você é BRASILEIRO`);
  }
}

Now the result can change since it depends on the value entered by the user and not a fixed value in the variable pais, as "let pais = 'Basill'".

  • Thanks for the help. But I still have the same problem, you could see some more error in my logic?

  • @Tatibezerra check if you are not typing the value with lower case letters (given that you are comparing the typed value with "Brazil", with "B" higher) and searched for the correct element.

  • That’s right! Now it’s running right. If it’s not too much trouble, you can tell me how I eliminate this limitation, so that regardless of whether it’s capital letters or minuscules it works properly?

  • Change the value "Brazil" to "brazil" and use pais.toLowerCase() to leave all the letters of the entered value lowercase. The same can be done by changing the value to "BRAZIL" and using pais.toUpperCase().

Browser other questions tagged

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