How to put an input value to be analyzed in a Promise?

Asked

Viewed 66 times

2

"Create a function that receives a user’s age and returns a Promise that after 2 seconds will return if user is older than 18 years or not"

When I open the page after 2 seconds the result loads even without me having entered a value. And right after, when I put a value (higher or lower than 18) the result always says that it is lower.

My code:

function clicado() {
    var inputIdade = document.querySelector('input.idad').value;
    return inputIdade;
}

function checaIdade(idade) {
    return new Promise(function(resolve,reject){
        setTimeout (function() {
            if(idade > 18) {
                resolve();
            } else {
                reject();
            }
        }, 2000 );
    })
}

checaIdade(clicado())
    .then(function() {
        console.log("Maior que 18");
    })
    .catch(function() {
        console.log("Menor que 18");
});
javascript html promises

  • Welcome to Stack Overflow in English :-) ... But what’s the problem with your code? Is there an error? More details on your question.

  • Thanks :) So when I open the page after 2 seconds the result loads even without I have entered a value. And right after, when I put a value (higher or lower than 18) the result always says that it is lower.

1 answer

0


The way you did, you’re already running the setTimeout() so after 2 seconds is already shown the value which also makes the code always fall into the catch() that would be the Reject(), because the value is empty, so will never be greater than 18. Note that getting involved to execução da Promise in setTimeout() and insert a default value into the input, you will see that the console will be shown correctly:

function clicado() {
  var inputIdade = document.querySelector('input#idad').value;
  return inputIdade;
}

function checaIdade(idade) {
  return new Promise(function(resolve, reject) {
    if (idade >= 18) {
      resolve();
    } else {
      reject();
    }
  })
}

setTimeout(() => {
  checaIdade(clicado())
  .then(function() {
    console.log("Maior que 18");
  })
  .catch(function() {
    console.log("Menor que 18");
  });
}, 2000)
<input type="text" id="idad" value="36">

Now if you want to show the console at the age you entered in the input, you can add a type event onblur(), for example, to do the if/else according to the entered value:

function clicado() {
  var inputIdade = document.querySelector('input#idad').value;
  return inputIdade;
}

function checaIdade(idade) {
  return new Promise(function(resolve, reject) {
    if (idade >= 18) {
      resolve();
    } else {
      reject();
    }
  })
}

document.querySelector('input#idad').addEventListener('blur', () => {
  setTimeout(() => {
    checaIdade(clicado())
    .then(function() {
      console.log("Maior que 18");
    })
    .catch(function() {
      console.log("Menor que 18");
    });
  }, 2000)
})
<input type="text" id="idad">

NOTE: In the condition tbm I put a greater or equal 18, if it is 18 already and adult age!

Browser other questions tagged javascript html promises

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