Why does not the program work, when changing the conditional?

Question

Why does not the program work, when changing the conditional?

Navigation

#1 by (0 votes)

0

I have a code, which avoids showing the alert when the input is in focus:

var focused = false;
window.addEventListener("DOMContentLoaded",()=>{ 
var inputs = document.getElementsByTagName("INPUT");
for(var input of inputs){
  input.addEventListener("focus",()=>{
  focused = true;
  });
}
  redirect(); 
});

function redirect(){
  window.addEventListener("keyup", e => {
  if((e.key === "y" || e.key == "Y") && !focused) alert("Ir a youtube?");
  });
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="Escribime aqui"/>
</body>
</html>

The code works well, the problem is that by modifying the redirect () function and leaving the focused variable in a single conditional, the code does not work, like this:

var focused = false;
window.addEventListener("DOMContentLoaded",()=>{ 
var inputs = document.getElementsByTagName("INPUT");
for(var input of inputs){
  input.addEventListener("focus",()=>{
  focused = true;
  });
}
  redirect(); 
});

function redirect(){
  if(!focused){
  window.addEventListener("keyup", e => {
  if(e.key === "y" || e.key == "Y") alert("Ir a youtube?");
  });
  }  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="Escribime aqui"/>
</body>
</html>

javascript

asked by Eduardo Sebastian 29.10.2017 в 04:41

source

1 answer

look for exact number in columns according to number of the left part Error accessing Intent.ACTION_PICK for contacts in apk release

score 0 · Answer 1

We do a bit of console log to follow the flow of the program and detect what happens.

var focused = false;
window.addEventListener("DOMContentLoaded",()=>{
console.log('1 Entramos en el load y el valor de focused es : ', focused);
var inputs = document.getElementsByTagName("INPUT");

for(var input of inputs){
  input.addEventListener("focus",()=>{
  console.log('5 Hacemos focus en un input siendo el valor de focused: ', focused);
  focused = true;
  console.log('y lo cambiamos a:', focused);
  });
}

  console.log('2 vamos a llamar a redirect siendo el valor de focused:  ', focused);
  redirect(); 
});

function redirect(){
  console.log('3 Valor de focused: ', focused);
  if(!focused){
    console.log('4 el evento keyup se ha añadido siendo focused: ', focused);
    window.addEventListener("keyup", e => {
      console.log('6 entrando en el evento keyup focused es:', focused);
      if(e.key === "y" || e.key == "Y") alert("Ir a youtube?");
    });
  } else {
    console.log('4 el evento keyup no se ha añadido ya que focused es:', focused);
  }
  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="Escribime aqui"/>
</body>
</html>

If we now apply it to the first code:

var focused = false;
window.addEventListener("DOMContentLoaded",()=>{ 
  console.log('1 Entramos en el load y el valor de focused es : ', focused);
  var inputs = document.getElementsByTagName("INPUT");
  for(var input of inputs){
    input.addEventListener("focus",()=>{
      console.log('3 el valor de focused antes de comprobarlo es:  ', focused);
      focused = true;
      console.log('y lo cambiamos a :  ', focused);
    });
  }
  console.log('2 vamos a llamar a redirect siendo el valor de focused:  ', focused);
  redirect(); 
});

function redirect(){
  window.addEventListener("keyup", e => {
    console.log('4 el valor de focused antes de comprobarlo es:  ', focused);
    if((e.key === "y" || e.key == "Y") && !focused) alert("Ir a youtube?");
    console.log('5 y por eso nunca se ejecuta nuestro alert');
  });
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input type="text" placeholder="Escribime aqui"/>
</body>
</html>

In its second code, it only asks the status of focused once, exactly to add the event, but never within its callback , it is always true and adds the event.

However, it is normal that it does not work in your first code because the callback of the focus is executed before the keyUp , invalidating the execution of the alert .

In my humble opinion it is a bit silly to ask if an input has focus activated in a keyback callback. Since the first implies the second, but to taste colors. :)