AngularJS: calculator operation buttons alerts not changing

Question

I am creating a calculate using angularJS and one of the features I want to include is having the description of the operation displayed visually (e.g. adding, subtracting, dividing etc).

In my HTML I've place a class for my operation buttons '.function-button' which I captured using document.querySelectorAll(); (I have also tried querySelector()), I've done this to test in an if statement whether the .html() is equal to an operation (+, -, *, /) and if so alert the operation being performed.

The problem is no matter which operation button I click it's always the addition operation.

I am calling $scope.currentOperation() in $scope.current() function.

$scope.current() function:

$scope.current = function(btn) {
      var last;
      if ($scope.justGotMath) {
        $scope.justGotMath = false;
        if (!$scope.isOperator(btn)) {
          $scope.stuff = [];
        }
      }
      btn = btn.toString();
      if (btn === '.') {
        last = $scope.stuff.pop();
        if ($scope.isOperator(last) || Math.ceil(last) !== parseInt(last)) {
          $scope.stuff.push(last);
        } else {
          last += '.';
          $scope.stuff.push(last);
          $scope.writeScreen();
          $scope.currentOperation();
        }
        return;
      }
      if ($scope.isOperator(btn)) {
        if (!$scope.stuff.length) {
          return;
        }
        last = $scope.stuff.pop();
        if (!$scope.isOperator(last)) {
          $scope.stuff.push(last);
        }
        $scope.stuff.push(btn);
      } else if ($scope.stuff.length) {
        last = $scope.stuff.pop();
        if ($scope.isOperator(last)) {
          $scope.stuff.push(last);
          $scope.stuff.push(btn);
        } else if (last.toString() === '0') {
          $scope.stuff.push(btn);
        } else {
          last += btn.toString();
          $scope.stuff.push(last);
        }
      } else {
        $scope.stuff.push(btn);
      }
      $scope.writeScreen();
      $scope.currentOperation();

      return this;
    };

currentOperation function:

 $scope.currentOperation = function(){
              var btnVal = angular.element(document.querySelectorAll('.function-button'));
              console.log(btnVal.html());
              if(btnVal.html() === '+') {
                  alert('add');
              }else if(btnVal.html() === '-'){
                  alert('subtract');
              }else if(btnVal.html() === '/') {
                  alert('divide');
              }else if(btnVal.html() === '*') {
                  alert('multiply');
              }
          };

operation buttons HTML:

<a ng-click="current('+')" href="javascript:void(0)" class="function-button  add">&plus;</a>
    <a ng-click="current('-')" href="javascript:void(0)" class="function-button subtract">&minus;</a>
    <a ng-click="current('*')" href="javascript:void(0)" class="function-button multiply">&times;</a>
    <a ng-click="current('/')" href="javascript:void(0)" class="function-button divide ">&divide;</a>

Answer 1

You need to name store the html element in an variable or pass it to the currentOperation function. Right now all of the anchor tags have the same class, so when your 'getElementById' function runs, it returns the first result, which is addition.

$scope.currentOperation(btn);

And then, you would change your currentOperation function:

$scope.currentOperation = function(btnVal){
          console.log(btnVal);
          if(btnVal === '+') {
              alert('add');
          }else if(btnVal === '-'){
              alert('subtract');
          }else if(btnVal === '/') {
              alert('divide');
          }else if(btnVal === '*') {
              alert('multiply');
          }
      };