JSFiddle - React, Tailwind, and code Playground

by shruti patil

HTML

<div id="links">
  <table class="c-table">
    <thead>
      <tr>
        <th colspan="2">Sales Metrics</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class = "tagid"><a id = "anchor">Volume Growth (MoM)</a></td>
        <td><span id="salesVolumeGrowthMoM"></span></td>
      </tr>
      
      

    </tbody>
  </table>
</div>
<button class="buttonTrend" ng-class="{'active': isActive}" ng-click="activeTrends()" type="button">Trends</button>

CSS

.isDisabled {
  color: black;
  cursor: none;
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}
.isEnabled {
  color: blue;
  cursor: none;
  
  text-decoration: underline;
  pointer-events: none;
}

JavaScript

var count =0;

$scope.activeTrends = function() {
count ++;
   //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
    angular.element( document.querySelector( '#anchor' ).attr("href","#") );
     //document.getElementById("anchor").setAttribute("href","#");
    }
    // on even clicks do this
    else if (isEven(count) === true) {
    
    //document.getElementById("anchor").removeAttribute("href");
   
    }
}
/* $('.buttonTrend').on('click',function() {

 count++;
    //even odd click detect 
    var isEven = function(someNumber) {
        return (someNumber % 2 === 0) ? true : false;
    };
    // on odd clicks do this
    if (isEven(count) === false) {
     document.getElementById("anchor").setAttribute("href","#");
    }
    // on even clicks do this
    else if (isEven(count) === true) {
    document.getElementById("anchor").removeAttribute("href");
   
    }
 

 
 });
 */