Why does a Function invoked by onclick not influence external commands to it?

Asked

Viewed 54 times

2

As can be seen in the code, the variables declared are global, and the routine should display the result on the console as soon as the "Send" button was selected. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input type="button" value="Enviar" onclick="conta()">
<script>
  //VARIÁVEIS
  var numero = 5;
  var resultado;
  var pronto = false;
  //FUNÇÕES
  function conta(){
    resultado = numero + 5;
    pronto = true;
  }
  //ROTINA
  if (pronto == true){
  console.log(resultado);
  }
</script>
</body>
</html>

But when running, the console is not displayed. If variables are declared locally within function conta(), the operation is performed (which can be proven with a console.log(resultado) within the function. But this does not affect the console.log(resultado) external to it. What should I do to make this function invoked by onclick interact with other javascript lines?

javascript html function onclick

  • Your onclick performs the function conta, Anything you want to do from the click - including logging in results on the console - has to be done inside. The part you called routine runs as soon as the page loads, and right after the account function is created, but before it is executed (it will only run in the click).

2 answers

2


Maybe you need to learn what it is Programming Oriented to Events. Javascript is an event-oriented language (at least superficially) and this paradigm controls the flow through external indications, called events.

This means that when creating a function and assigning its execution to an event the entire code portion of the function will be executed from this event. Basically your code is waiting for a user action to change the value of the variables, this means that the rest of your code has already been executed independent of what there is before it, IE, you are checking the value of the variable before it is changed.

var valor = false;

function clique() {
  
  valor = true;
  
  // o valor agora é 'true', pois a função foi executada só agora 
  console.log(valor);
  
}

// essa linha vai ser executada independente do que há antes dela. O valor ainda é 'false', pois o usuário ainda não clicou no link
console.log(valor);
<a href="#" onclick="clique()">Clique em mim!</a>

Usually the function sane algorithms which are executed when there is a call. When writing your function you will not be running it. To perform the javascript call you must start with the function name and finish by inserting the parameters between parentheses nomeFuncao('parametro1'), if you have no parameter, the parentheses are empty nomeFuncao().

When you "link" a function to an HTML DOM event, for example onclick='nomeFuncao()', you are "telling javascript" that when the user clicks on this DOM the function codes will be executed nomeFuncao parameter-less.

0

Ok, here’s the thing, this if will only be called when the page loads; if you want it to be called whenever you click, the right one is for it in a function and call it too:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
  <input type="button" value="Enviar" onclick="conta()">
<script>
  //VARIÁVEIS
  var numero = 5;
  var resultado;
  var pronto = false;
  //FUNÇÕES
  function conta(){
    resultado = numero + 5;
    pronto = true;
    rotina()
  }
  function rotina(){
    if (pronto == true){
      console.log(resultado);
    }
  }
  //ROTINA

</script>
</body>
</html>

Browser other questions tagged javascript html function onclick

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