Add paramters to URL with click functions

Question

I want to add parameters to the actual url depending on the selected values. The values will be set with a click function and should work independently from each other.

I've set global variables to store the click function values, but they don't get stored. How can I store the values correctely to work with them in my "URLSearchParams" string?

This is the Fiddle .

 var btn0;    
 var btn1;
      
      $('.btn0').click(function () {
    if ($(this).attr('data-selected') === 'true') {
      $(this).attr('data-selected', 'false');
      $(this).removeClass('selected');

    } else {
      $(this).closest('tr').find('.btn0').not(this)
        .removeClass('selected').attr('data-selected', 'false');
      $(this).attr('data-selected', 'true');
      $(this).addClass('selected');
      var btn0 = $(this).data("value");
    }
  });
  
      $('.btn1').click(function () {
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');

        } else {
            $(this).closest('tr').find('.btn1').not(this)
            .removeClass('selected').attr('data-selected', 'false');
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
            var btn1 = $(this).data("value");
        }
    });
    
const params = new URLSearchParams({
  var0: btn0,
  var1: btn1
});   
console.log(params.toString());

Answer 1

The params object does not reference to variables, but is initialized with empty btn0 and btn1. Re declaring btn0 and btn1 inside the click assignments makes no sense, because these will be new variables. You have to use the set function to manipulate key value pairs in params.

Here is a working example:

 var btn0; var btn1; $('.btn0').click(function () { if ($(this).attr('data-selected') === 'true') { $(this).attr('data-selected', 'false'); $(this).removeClass('selected'); } else { $(this).closest('tr').find('.btn0').not(this) .removeClass('selected').attr('data-selected', 'false'); $(this).attr('data-selected', 'true'); $(this).addClass('selected'); params.set('var0', $(this).data("value")); console.log(params.toString()); } }); $('.btn1').click(function () { if ($(this).attr('data-selected') === 'true') { $(this).attr('data-selected', 'false'); $(this).removeClass('selected'); } else { $(this).closest('tr').find('.btn1').not(this) .removeClass('selected').attr('data-selected', 'false'); $(this).attr('data-selected', 'true'); $(this).addClass('selected'); params.set('var1', $(this).data("value")); console.log(params.toString()); } }); const params = new URLSearchParams({ var0: btn0, var1: btn1 }); console.log(params.toString());

Answer 2

Consider the following: https://jsfiddle.net/Twisty/ckd1j6u0/

HTML

<table class="container">
  <tbody>
    <tr class="tier0">
      <td class="talent-cell">
        <div class="btn btn0" data-value="a">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="b">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn0" data-value="c">Test2</div>
      </td>
    </tr>
    <tr class="tier1">
      <td class="talent-cell">
        <div class="btn btn1" data-value="d">Test0</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="e">Test1</div>
      </td>
      <td class="talent-cell">
        <div class="btn btn1" data-value="f">Test2</div>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$(function() {
  var selected = {
    var0: null,
    var1: null
  };
  $('.btn').click(function(event) {
    var row = $(this).closest("tr");
    $(".selected", row).removeClass("selected");
    $(this).addClass("selected");
    if ($(".selected").length == 2) {
      $("tr").each(function(i, el) {
        selected['var' + i] = $(".selected", el).attr("data-value");
      });
      var params = new URLSearchParams(selected);
      console.log(params.toString());
    }
  });
});

This uses just selected class instead of trying to also manage data-selected attributes. The code first makes sure only one button in each row is selected. It then populates an Object. When two selections have been made, it then creates the parameters for URL.