Question 283185 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – im having problems to add a calculator, a function that gets dynamicly the operator

someone can help me with some JS basics?

im a rookie, trying to do a calculator, that get the value in the screen, stores it in a variable called previousValue, then the calculator display sets clean and you digit the new number and then when you click equals, its stored in a currentValue variable, and then the operation with previous and current values occours and appear into the display. The issue is i dont know how to set the operator dynamicly to the equals function, that should works by getting the previousValue and operating with the currentValue, whataver the operator is And if i try to change things and do a switch case for each operatorButton.textContent that does the operation there storing in a variable, then when equals() is called just prints this variable on the display.

Things get worst to me, cause i also cant figure out a way to place functions inside de swicth case that calls

get PreviousNumber (a function that gets the number seted on the display and clean it to you digit a new number) and then WAITS till i digit a new number to execute currentNumber function (just gets the number seted in the screen if operator != null)

I dont know if i made things clear, if i didnt, sorry and let me know in the awnsers

here it is the code i have made so far (https://github.com/DanielRKlein/calculator-js)

i’ve explained above

Tags:

2

Answers


  1. 0

    i understand u used switch to be able to carryout the math operation but if you can merge your the textContent of #previousOperationText and #currentOperationText and pass it as an argument to the JS built in eval function;
    Example

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript Eval Method</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = eval("4/2");
</script>

</body>
</html>

    Result

    Login or Signup to reply.
  2. 0

    You can use JS object to store data and then use it after with new data and selected operator. Below is draft example of simple calc. Of course you need to write some symbol checks etc, but to get general idea it’s pretty ok. Check inline comments and check demo by clicking Run code snippet:

    // Display
const disp = document.getElementById("disp");

// Object to store data
const data = {};

// Clear data function
const cData = () => {
  delete data.value;
  delete data.operator;
  delete data.clear;
}

// Operators functions
const op = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b
};

// Calculator function
const calc = v => {
  // Get current value from disp
  let cv = disp.innerText;
  
  // If typing numbers, add to disp.
  // Replace zero with empty line
  if(/[d.]/.test(v)) {
    // Clear current disp if flag is set
    if(data.clear) {
      delete data.clear;
      cv = 0;
    }
    
    // Inner data to display
    disp.innerText = `${cv == '0' && v != '.' ? '' : cv}${v}`;
  }
  
  // If operator, copy value and
  // current operator and set flag to
  // clear disp on next digit input
  if(/[/+-*]/.test(v)) {
    data.value = cv;
    data.operator = v;
    data.clear = true;
  }
  
  // If equal request, check data object
  // for value and operator and do calc
  if(/=/.test(v) && data.operator) {
    // Calculate our data and inner result
    disp.innerText = op[data.operator](Number(data.value), Number(cv));
    
    // Clear data object
    cData();
  }
  
  // If clear, then clear data and put 0
  // in to the disp
  if(/clear/.test(v)) {
    // Clear data object
    cData();
    
    // Put 0
    disp.innerText = 0;
  }
}
    div {
  font-size: 18px;
  margin-bottom: 12px;
}
button {
  width: 24px;
  margin-bottom: 4px;
}
    <div id="disp">0</div>

<button onclick="calc(1)">1</button>
<button onclick="calc(2)">2</button>
<button onclick="calc(3)">3</button>
<button onclick="calc('/')">÷</button>
<br>
<button onclick="calc(4)">4</button>
<button onclick="calc(5)">5</button>
<button onclick="calc(6)">6</button>
<button onclick="calc('*')">×</button>
<br>
<button onclick="calc(7)">7</button>
<button onclick="calc(8)">8</button>
<button onclick="calc(9)">9</button>
<button onclick="calc('-')">−</button>
<br>
<button onclick="calc(0)">0</button>
<button onclick="calc('.')">.</button>
<button onclick="calc('=')">=</button>
<button onclick="calc('+')">+</button>
<br>
<button onclick="calc('clear')">C</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search