javascript string manipulation by adding a single character

Question

In my case, when you click a button, it will add a get parameter on my string but if you click again it should add a hyphen on the value of the parameter. This will actually be used for descending and ascending

My current code is:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <p id ='demo'></p>
    <button column-data='age'>Age</button>
    <button column-data='height'>Height</button>
    <button column-data='weight'>Weight</button>
  </body>
  <script>
    document.getElementById("demo").innerHTML = window.location.href;
    $(function() {
      $('button').click(function(){
        data = $(this).attr('column-data');
        order_regex_asc = new RegExp('[&?]order=' + data, 'g')
        order_regex_desc = new RegExp('[&?]order=-' + data, 'g')
        _loc = window.location.href
        if(data){
          if (_loc.search(/[?]order/) == -1){  // Conditional to start GET parameter
                _loc = _loc + '?order=' + data;
                window.location = _loc
          }else{
              if ( _loc.search(order_regex_asc) != -1){ // Conditional to make this decending
                  console.log('dean');
                  // _loc = _loc.replace(order_regex_asc, '')
                  // data = '-'+data
              }else if (_loc.search(order_regex_desc) != -1){ // Conditional to make this ascending
                  console.log('armada');
                  // _loc = _loc.replace(order_regex_desc, '')
              }else{
                  window.location = _loc + '&order=' + data;
              }

          }
          document.getElementById("demo").innerHTML = _loc;
        }
      });
    });
  </script>
</html>

Here is my plunker: https://plnkr.co/edit/nE6MK7PWb54GkXOdIojn?p=preview

For example in my plunker, if you click the 'age' button it will add ?order=age . If you clicked it to the second time, the adde should be ?order=-age . If you click it for the third time then it should be back to ?order=age . If you keep clicking then it will just switch back and forth on adding removing the hyphen.

I've been stuck here for hours and it's been so long since I coded in javascript

Answer 1

Easy.

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <p id ='demo'></p>
    <button column-data='age'>Age</button>
    <button column-data='height'>Height</button>
    <button column-data='weight'>Weight</button>

  <script>
    document.getElementById("demo").innerHTML = 
    window.location.href;
    $(function() {
      $('button').click(function(){
        data = $(this).attr('column-data');
        order_regex_asc = new RegExp('[&?]order=' + data, 'g')
        order_regex_desc = new RegExp('[&?]order=-' + data, 'g')
        _loc = window.location.href

        //if(_loc.indexOf('?order=-'))
        zinData = '?order=' +  data;
        zinNegativeData = '?order=' + "-" +  data;

        if(_loc.indexOf(zinData) == -1){
          _loc = _loc.replace(zinNegativeData, '');
          data =  zinData;
        }
        else{
          _loc = _loc.replace(zinData, '');
          data =  zinNegativeData;
        }
        _loc = _loc +  data;
                window.location = _loc
          document.getElementById("demo").innerHTML = _loc;

      });
    });
  </script>
 </body>
</html>

Answer 2

<!DOCTYPE html>
<html>

  <head>    
    <link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="script.js"></script>
  </head>

  <body>
    <p id ='demo'></p>
    <button type="button" column-data='age'>Age</button>
    <button type="button" column-data='height'>Height</button>
    <button type="button" column-data='weight'>Weight</button>
     <script>
    document.getElementById("demo").innerHTML = window.location.href;
    $(function() {
      $('button').click(function(){
        data = $(this).attr('column-data');
        order_regex_asc = new RegExp('[&?]order=' + data, 'g')
        order_regex_desc = new RegExp('[&?]order=-' + data, 'g')
        _loc = window.location.href
        if(data){
          if (_loc.search(/[?]order/) == -1){  // Conditional to start GET parameter
                _loc = _loc + '?order=' + data;
                window.location = _loc
          }else{
              if (_loc.search(order_regex_asc) != -1){ // Conditional to make this decending
                  console.log('dean');
                  _loc = _loc.replace(data, '-'+data)
                  window.location=_loc;

              }else if (_loc.search(order_regex_desc) != -1){ // Conditional to make this ascending
                  console.log(armada);
                  _loc = _loc.replace('-'+data,data)
                  window.location=_loc;
                  // _loc = _loc.replace(order_regex_desc, '')
              }else{
                  window.location = _loc + '&order=' + data;
              }

          }
          document.getElementById("demo").innerHTML = _loc;
        }
      });
    });
  </script>
  </body>

</html>

javascript string manipulation by adding a single character

Question

2 answers

solution1
2 2017-01-25 05:58:03

solution2
1 ACCPTED 2017-01-25 05:48:13

javascript string manipulation by adding a single character

Question

2 answers

solution1 2 2017-01-25 05:58:03

solution2 1 ACCPTED 2017-01-25 05:48:13

solution1
2 2017-01-25 05:58:03

solution2
1 ACCPTED 2017-01-25 05:48:13