Save values of multiple clicks and get all values inline

Question

I have multiple buttons on my page. I want to get the values for those and displayed in one line. How do I do that.

I have 3 buttons, onclick they return these values:

Dark : returns 'scoop'
Danger : returns 'swoosh'
Warning : returns 'spoon'

I have one big button (info), on clicking that I want that to return: scoop&swoosh&spoon

How do I do that?

let val;

  $('#one').on('click', function(){
    val = 'scoop';
  });

  $('#two').on('click', function(){
    val = 'swoosh';
  });

  $('#three').on('click', function(){
    val = 'spoon';
  });

  $('#main').on('click', function(){
   console.log(val);
   //Expected value: scoop&swoosh&spoon
 });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>

<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>

score 1 · Accepted Answer · answered Jun 05 '20 at 22:23

Currently, each click resets the variable, assigning a new value. Consider using an Array and updating it with a new item for each click.

Example:

let val = [];

$('button').on('click', function() {
  switch ($(this).attr("id")) {
    case "one":
      val.push('scoop');
      break;
    case "two":
      val.push('scoop');
      break;
    case "three":
      val.push('scoop');
      break;
  }
});

$('#main').on('click', function() {
  console.log(val.join(" & "));
  // Example Value: scoop & swoosh & spoon
  // Clear the array
  val = [];
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


<div><button id="one" type="button" class="btn btn-dark m-3">Dark</button></div>
<div><button id="two" type="button" class="btn btn-danger m-3">Danger</button></div>
<div><button id="three" type="button" class="btn btn-warning m-3">Warning</button></div>

<hr />
<div><button id="main" type="button" class="btn btn-info btn-block">Info</button></div>

Quick question, when I click a button twice, the value shows up twice. Can I just get it once? — nb_nb_nb, Jun 05 '20 at 23:56
@nb_nb_nb yes, since it's an Array you have lots of tools to clean out any duplicates. See: https://stackoverflow.com/questions/9229645/remove-duplicate-values-from-js-array — Twisty, Jun 06 '20 at 02:49

Save values of multiple clicks and get all values inline

1 Answers1