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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

As can be seen in the code, the declared variables are global, and the routine should display the result on the console as soon as the "Submit" 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 it is run, 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 the other javascript lines?

javascript html onclick

asked by anonymous 16.03.2018 / 21:03

2 answers

0

Ok, this is the following, 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>

16.03.2018 / 21:16

How to put two buttons side by side I lost the Glassfish administrator password

score 2 · Accepted Answer

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

This means that when creating a function and assigning it to an event, the entire code 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 regardless of what is there before it, ie you are checking the value of the variable before it is changed. / p>

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 functions are algorithms that are executed when there is a call. When writing your function you will not be running it. To make the call in javascript you must start with the name of the function and end by inserting the parameters in parentheses nomeFuncao('parametro1') , if you do not have any parameters, 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% .