1

Olá,

Estou iniciando em JS e resolvi fazer uma calculadora.

Criei uma função que deveria puxar os dados do visor que recebe os dados clicados na calculadora e também é um input, e outra que puxa os dados dessa função quando clicamos em '=' e retorna esse valor onde criei o campo resultado. A função que criei, quando testo no terminal, funciona com os parametros "operador", valor1, valor2. Mas quando está no código recuperando os valores do visor, ela me retorna undefined. Podem clarear isso pra mim?

Obrigada!

O código está assim:

<section id="calculadora">
<div type="number" name="resultado" id="resultado"></div>
<input type="text" name="intro" id="intro">
<input type="button" class = "oper" value="1" onclick="numero(1)" >
<input type="button" class = "num" value="2" onclick="numero(2)">
<input type="button" class = "num" value="3" onclick="numero(3)">
<input type="button" class = "num" value="0" onclick="numero(0)">
<input type="button" value="CE" onclick="limpar()">
<input type="button" class = "num" value="4" onclick="numero(4)">
<input type="button" class = "num" value="5" onclick="numero(5)">
<input type="button" class = "num" value="6" onclick="numero(6)">
<input type="button" class = "oper" value="-" onclick="operacao(value)">
<input type="button" class = "oper" value="/" onclick="operacao(value)">
<input type="button" class = "num" value="7" onclick="numero(7)">
<input type="button" class = "num" value="8" onclick="numero(8)">
<input type="button" class = "num" value="9" onclick="numero(9)">
<input type="button" class = "oper" value="+" onclick="operacao(value)">
<input type="button" class = "num" value="x" onclick="operacao(value)">
<input id="verificar" type="button" value="=" onclick="calcular()">


</section>

<script>
var intro = document.getElementById("intro")
var resultado = document.getElementById("resultado")
function limpar(){
    intro.value = ""
}

function numero(value){
    intro.value += value
}

function operacao (value){
    intro.value += value
}

function execute (operador, valor1, valor2){

var valor1 = Number(valor.value)
var valor2 = Number(valor.value)
if (operador == "+"){
    var result = parseInt(valor1) + parseInt(valor2)
} else if (operador == "-") {
    var result = parseInt(valor1) - parseInt(valor2)
} else if (operador == "/") {
    var result = parseInt(valor1) / parseInt(valor2)
} else if (operador == "x") {
    var result = parseInt(valor1) * parseInt(valor2)
}
return result
}

function calcular () {
    resultado.innerHTML = execute()
}
2
  • Vc tá chamando a função execute() sem passar nenhum argumento: resultado.innerHTML = execute()
    – Sam
    Commented 4/12/2019 às 19:08
  • Também ignora os parâmteros valor1 e valor2 e pega de um tal valor que não existe.
    – mari
    Commented 4/12/2019 às 20:26

1 Resposta 1

0

Fiz algumas alterações em seu código, primeiro no início do código, declarei uma variável chamada operador, essa variável guardará qual será o operador desse cálculo, com ela declarada no escopo global da página não será precisa usar mais ela como parâmetro ou recuperar o valor novamente, é possível usa-la dentro de qualquer função.

Na sua função execute, as variáveis valor1 e valor2, estavam recebendo um valor de uma variável inexistente, então atribuí valores corretos à elas.

Na sua função calcular, não existia nenhuma lógica dentro dela, então tomei por mim fazer lógica de recuperar o valor da operação e identificar o que era numero à ser calculado e o que era operador, usei a função split para criar um array e conseguir fazer essa identificação.

var intro = document.getElementById("intro")
var resultado = document.getElementById("resultado")
var operador;
function limpar(){
    intro.value = ""
}

function numero(value){
    intro.value += value
}

function operacao (value){
    operador = value;
    intro.value += value
}

function execute (valor1, valor2){

    var valor1 = Number(valor1)
    var valor2 = Number(valor2)
    if (operador == "+"){
        var result = parseInt(valor1) + parseInt(valor2)
    } else if (operador == "-") {
        var result = parseInt(valor1) - parseInt(valor2)
    } else if (operador == "/") {
        var result = parseInt(valor1) / parseInt(valor2)
    } else if (operador == "x") {
        var result = parseInt(valor1) * parseInt(valor2)
    }
    return result
}

function calcular () {
    const intro = document.getElementById('intro').value;
    const introSplit = intro.split(operador);
    const num1 = introSplit[0];
    const num2 = introSplit[1];
    
    resultado.innerHTML = execute(num1, num2)
}
<section id="calculadora">
    <div type="number" name="resultado" id="resultado"></div>
    <input type="text" name="intro" id="intro">
    <input type="button" class = "oper" value="1" onclick="numero(1)" >
    <input type="button" class = "num" value="2" onclick="numero(2)">
    <input type="button" class = "num" value="3" onclick="numero(3)">
    <input type="button" class = "num" value="0" onclick="numero(0)">
    <input type="button" value="CE" onclick="limpar()">
    <input type="button" class = "num" value="4" onclick="numero(4)">
    <input type="button" class = "num" value="5" onclick="numero(5)">
    <input type="button" class = "num" value="6" onclick="numero(6)">
    <input type="button" class = "oper" value="-" onclick="operacao(value)">
    <input type="button" class = "oper" value="/" onclick="operacao(value)">
    <input type="button" class = "num" value="7" onclick="numero(7)">
    <input type="button" class = "num" value="8" onclick="numero(8)">
    <input type="button" class = "num" value="9" onclick="numero(9)">
    <input type="button" class = "oper" value="+" onclick="operacao(value)">
    <input type="button" class = "num" value="x" onclick="operacao(value)">
    <input id="verificar" type="button" value="=" onclick="calcular()">
</section>


Referência: Split

1
  • Pedro Henrique, muito obrigada pela explicação. Ficou exatamente como eu imaginava.
    – lis
    Commented 5/12/2019 às 14:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .