CODEWITHSUNDEEP
javascriptfunctionvariables
Bruno Viana
Bruno Viana

Reputation: 1

How to use a VAR value from a function in another?

I'm Bruno and I started learning HTML/CSS/JS this month, I would like to know how can I use a var value from a function in another? I tried to create different functions to bring me the operator and numbers typed and then I'll use the if statement to check if the operator and numbers are typed, but the console.log(operador) is returning undefined.

Could you please share some tips on how can I fix this issue on my code?

Thank you so much :)

function oper(value) {
  var operacao = document.getElementById("operador").value = value;
}

function num(value) {
  var operador = oper(value);
  var current = document.getElementById("numeral").value += value;

  if (current === "" && operator === "") {
      var checkfalse = false
    } 
    else if (current !== "" && operator !== "") {
      var checktrue = true
    }
      console.log(operador)
}


<!-- begin snippet: js hide: false console: true babel: false -->
section.linha-1 div{
  display: inline-block;

}
section.linha-2 div{
  display: inline-block;
}

section.linha-3 div{
  display: inline-block;

}

section.linha-4 div{
  display: inline-block;

}

section.linha-5 div{
  display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
    <header>Calculadora (HTML/CSS/JavaScript)</header>
    <section class="tela-iphone">
      <section class="tela-display">
          <div class="display">
              <input class ="tela-display" id="tela-display" type="text" readonly>
          </div>
      </section>
      <section class="linha-1">
          <div class="AC">
            <button class="limpar" id="limpar" onclick="ac()" value="limpar"> AC</button>
          </div>
          <div class="positivo-negativo">
              <button class="mais-menos" id="mais-menos" onclick="maismenos()" value="maismenos">+/-</button>
          </div>
          <div class="percentual">
              <button class= "percentual" id="percentual" onclick="percentual()" value="percentual">%</button>
          </div>
          <div class="divisao">
              <button class="divisao" id="operador" onclick="oper('÷')" value="÷">÷ </button>
          </div>
      </section>
      <section class="linha-2">
          <div class="sete">
              <button class="sete" id="numeral" onclick="num(7)" value="7">7</button>
          </div>
          <div class="oito">
              <button class="oito" id="numeral" onclick="num(8)" value="8">8</button>
          </div>
          <div class="nove">
              <button class="nove" id="numeral" onclick="num(9)" value="9">9</button>
          </div>
          <div class="multiplicacao">
              <button class="multiplicacao" id="operador" onclick="oper('×')" value="*">×</button>
          </div>
      </section>
      <section class="linha-3">
          <div class="quatro">
              <button class="quatro" id="numeral" onclick="num(4)" value="4">4</button>
          </div>
          <div class="cinco">
              <button class="cinco" id="numeral" onclick="num(5)">5</button>
          </div>
          <div class="seis">
              <button class="seis" id="numeral" onclick="num(6)" value="5">6</button>
          </div>
          <div class="subtracao">
              <button class="subtracao" id="operador" onclick="oper('-')" value="-">-</button>
          </div>
      </section>
      <section class="linha-4">
          <div class="um">
              <button class="um" id="numeral" onclick="num(1)" value="1">1</button>
          </div>
          <div class="dois">
              <button class="dois" id="numeral" onclick="num(2)" value="2">2</button>
          </div>
          <div class="tres">
              <button class="tres" id="numeral" onclick="num(3)" value="3">3</button>
          </div>
          <div class="adicao">
              <button class="adicao" id="operador" onclick="oper('+')" value="+">+</button>
          </div>
      </section>
      <section class="linha-5">
          <div class="zero">
              <button class="zero" id="numeral" onclick="num(0)" value="0">0</button>
          </div>
          <div class="virgula">
              <button class="virgula" id="virgula" onclick="virgula()" value="virgula">,</button>
          </div>
          <div class="resultado">
              <button class="resultado" id="resultado" onclick="resultado('=')" value="=">=</button>
      </section>
    </section>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Upvotes: 0

Views: 112

Answers (4)

Tom Lee
Tom Lee

Reputation: 366

If you don't want to make the variable global you can try this method.

function a() {
var x = 10
b(x)
}

function b(arg1) {
console.log(arg1)
/** You can get the value of x even though it is from another function, but try not to use this method for recursive actions as you might hit the function recursion limit **/
}

a()

Upvotes: 0

Explosion
Explosion

Reputation: 326

In JavaScript there are a few ways to do this:

Method #1: Returning

Simply use the return keyword to make you function return a value when run:

function oper(value) {
  var operacao = document.getElementById("operador").value = value;
  return operacoa;
}

console.log(oper("value here"));//Outputs the value of the operacoa variable

Method #2: Global variables:

You can also use globally scoped variables, however, returning is a much cleaner solution:

//Declare the variable
var operacao;

function oper(value) {
  operacao = document.getElementById("operador").value = value;
}

oper("value");

console.log(operacao); //Logs the output.

Upvotes: 0

Martino
Martino

Reputation: 1

Primeira coisa e bem simples:

O que está retornando sua função 'oper'?

se não está retornando nada, a variável 'operador' fica vazia.

very simple: 'oper' function needs a return statement

Upvotes: 0

Samathingamajig
Samathingamajig

Reputation: 13245

Just use return at the end of your function oper, like this:

function oper(value) {
  var operacao = document.getElementById("operador").value = value;
  console.log(operacao);
  return operacoa;
}

Upvotes: 1

Related Questions