I am creating a page that sets a variable to true or false based on a button click. This is doable if I create a function per variable/button, but since there will be quite a few variables in the end, I would like to do this in a single function, if possible:

<div>
  <button type="button" id="colorbutton" class="button red" onClick="manualSelect('Color')">Colors</button>
  <button type="button" id="animalbutton" class="button red" onClick="manualSelect('Animal')">Animals</button>
</div>

$manualColor = false;
$manualAnimal = false;    

function manualSelect(item) {
  if ($('manual' + item) == false) {
    $('manual' + item) = true;
  } else {
    $('manual' + item) = false;
  }
}

I know this is stupid, it's just to set the example.

Here's the full script: /

I am creating a page that sets a variable to true or false based on a button click. This is doable if I create a function per variable/button, but since there will be quite a few variables in the end, I would like to do this in a single function, if possible:

<div>
  <button type="button" id="colorbutton" class="button red" onClick="manualSelect('Color')">Colors</button>
  <button type="button" id="animalbutton" class="button red" onClick="manualSelect('Animal')">Animals</button>
</div>

$manualColor = false;
$manualAnimal = false;    

function manualSelect(item) {
  if ($('manual' + item) == false) {
    $('manual' + item) = true;
  } else {
    $('manual' + item) = false;
  }
}

I know this is stupid, it's just to set the example.

Here's the full script: https://jsfiddle/8ers54s9/5/

• javascript
• jquery

• Given that $('manual' + item) will never equal false, aside from the fact that it can not be set to true or false, I'm not sure what you're attempting to achieve – Rory McCrossan Commented Nov 17, 2017 at 14:07
• Change $manualColor or $manualAnimal to oposite true/false, based on the parameter. – João Gomes Commented Nov 17, 2017 at 14:09

3 Answers 3

This is possible, of course:

var manual = {
  "Color": false,
  "Animal": false,
};

$("button").on("click", function() {
  var item = $(this).data("select");
  manual[item] = !manual[item];
  console.info(manual);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <button type="button" id="colorbutton" class="button red"  data-select="Color">Colors</button>
    <button type="button" id="animalbutton" class="button red" data-select="Animal">Animals</button>
</div>

You can access properties of an object by text, eg:

flags["animal"] = true;

which you can also access as:

flags.animal = true;

so put all the "variables" that you want to toggle onto another variable, eg:

var flags = {};

function toggleFlag(item) {
  flags[item] = !flags[item];


  console.log("color: " + flags.color)
  console.log("animal: " + flags.animal)
  console.log(flags)
}

toggleFlag("test")

$(".button").click(function() {
  toggleFlag($(this).data("flag"))
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button type="button" class="button" data-flag='color'>Colors</button>
  <button type="button" class="button" data-flag='animal'>Animals</button>
</div>

In AngularJS

<button ng-click="manual()">Click me!</button>

$scope.manualColor = true;

$scope.manual = function () {
  $scope.manualColor = false;
}