How to show capital letters when shift key is pressed using javascript?

Question

I am working on a project which needs to show keyboard on a popup with small letters and capital letters. I'm done with small letters but when I press shift key all the letters should turn into capital letters. In this example I need to show the letters z,x,c,v,b as capitals when I click on Shift button. How can I acheive this? Thanks in advance. This is the code I have written so far:

 $scope.isShift = false;
        $scope.shiftPress = function() {
            $scope.isShift = !$scope.isShift;
        };
        $scope.printKey = function(value) {
            return $scope.isShift ? $filter('uppercase')(value) : value;
        };
}

$scope.numberclick = function(value){
        $scope.printKey(value);
}

<button class="Val-bt" ng-click="shiftPress()">Shift</button>
 <button class="Val-bt" ng-click="numberclick('z')">{{ printKey('z') }}</button>
 <button class="Val-bt" ng-click="numberclick('x')">{{ printKey('x') }}</button>
 <button class="Val-bt" ng-click="numberclick('c')">{{ printKey('c') }}</button>
 <button class="Val-bt" ng-click="numberclick('v')">{{ printKey('v') }}</button>
 <button class="Val-bt" ng-click="numberclick('b')">{{ printKey('b') }}</button>

Answer 1

You have to run a loop because document.getElementsByClassName('Val-bt') returns an array and you can set css to its element directly.

function shiftPress() {
  var buttons = document.getElementsByClassName('Val-bt');

  var i=0;
  var is = buttons[i].style.textTransform;
  if(is == "capitalize"){
    for(i=0; i< buttons.length; i++){
      buttons[i].style.textTransform = "lowercase";
    }
  }
  else{
    for(i=0; i< buttons.length; i++){
      buttons[i].style.textTransform = "capitalize";
    }
  }
}

<button class="Val-bt" onclick="shiftPress()">Shift</button>
 <button class="Val-bt" ng-click="numberclick('z')">z</button>
 <button class="Val-bt" ng-click="numberclick('x')">x</button>
 <button class="Val-bt" ng-click="numberclick('c')">c</button>
 <button class="Val-bt" ng-click="numberclick('v')">v</button>
 <button class="Val-bt" ng-click="numberclick('b')">b</button>

EDIT:

If you want to capitalize the innetHTML/innerText then use this:

function shiftPress() {
  var buttons = document.getElementsByClassName('Val-bt');

  var i=buttons.length-1;
  var is = buttons[i].innerHTML.charAt(0);
  console.log(is);
  var isn = is.toUpperCase()
  if(is == isn){
    for(i=0; i< buttons.length; i++){
      var buttonhtml = buttons[i].innerHTML;
      buttonhtml = buttonhtml.charAt(0).toLowerCase()+buttonhtml.slice(1);
      buttons[i].innerHTML = buttonhtml;
    }
  }
  else{
    for(i=0; i< buttons.length; i++){
      var buttonhtml = buttons[i].innerHTML;
      buttonhtml = buttonhtml.charAt(0).toUpperCase()+buttonhtml.slice(1);
      buttons[i].innerHTML = buttonhtml;
    }
  }
}

<button class="Val-bt" onclick="shiftPress()">Shift</button>
 <button class="Val-bt" ng-click="numberclick('z')">z</button>
 <button class="Val-bt" ng-click="numberclick('x')">x</button>
 <button class="Val-bt" ng-click="numberclick('c')">c</button>
 <button class="Val-bt" ng-click="numberclick('v')">v</button>
 <button class="Val-bt" ng-click="numberclick('b')">b</button>