How to define a variable of multiple variables in JavaScript

Question

I would like to know how can I define a bigger variable for a set of variables that I have in javascript: showFootnotesPanel();, showReferencesPanel();, showImagesPanel();, showInformationPanel();.

Would it be something like this?

function showPanel() {
  var x = [showFootnotesPanel();showReferencesPanel();showImagesPanel();showInformationPanel();]
}

Update:

I have this function that used to open a side panel on the right side and color the content:

var els = document.getElementsByClassName('change-color'),
  target = document.getElementsByClassName('resources'),
  changeColor = function(a) {
    elements = document.getElementsByClassName("note");

    for (var i = 0; i < elements.length; i++) {
      console.log(elements[i])
      elements[i].style.backgroundColor = "";
    }
    target = a.getAttribute('href');
    element = document.querySelector('[data-id="' + target.substring(1, target.length) + '"]');
    element.style.backgroundColor = a.getAttribute('data-color');

  };
for (var i = els.length - 1; i >= 0; --i) {
  els[i].onclick = function() {
    showFootnotesPanel();
    changeColor(this);
  }

Now I have 4 side panels that need to respond to the same script, and I thought that by defining something like showPanel() is showFootnotesPanel() or showReferencesPanel() or showImagesPanel() or showInformationPanel() I might simplify things, so the last line of the script would be this instead just:

els[i].onclick = function(){showPanel();changeColor(this);}

Update 2:

Or is it possible to do this with the logical operator OR?

els[i].onclick = function(){showFootnotesPanel(); || showReferencesPanel(); || showImagesPanel(); || showInformationPanel();changeColor(this);}

Update 3:

This is the new script that I am using to hide and show the panels:

function showPanel(myPanel) {
  var elem = document.getElementById(myPanel);
  if (elem.classList) {
    console.log("classList supported");
    elem.classList.toggle("show");
  } else {
    var classes = elem.className;
    if (classes.indexOf("show") >= 0) {
      elem.className = classes.replace("show", "");
    } else {
      elem.className = classes + " show";
    }
    console.log(elem.className);
  }
}


function hideOthers(one, two, three, four) {
  if (one > "") {
    var elem1 = document.getElementById(one);
    var classes = elem1.className;
    elem1.className = classes.replace("show", "");
  }
  if (two > "") {
    var elem2 = document.getElementById(two);
    var classes = elem2.className;
    elem2.className = classes.replace("show", "");
  }
  if (three > "") {
    var elem3 = document.getElementById(three);
    var classes = elem3.className;
    elem3.className = classes.replace("show", "");
  }
  if (four > "") {
    var elem4 = document.getElementById(four);
    var classes = elem4.className;
    elem4.className = classes.replace("show", "");
  }
  return;
}

And this is the script that calls the panels and highlights the text on them:

var els = document.getElementsByClassName('change-color'),
  target = document.getElementsByClassName('resources'),
  changeColor = function(a) {
    elements = document.getElementsByClassName("note");

    for (var i = 0; i < elements.length; i++) {
      console.log(elements[i])
      elements[i].style.backgroundColor = "";
    }
    target = a.getAttribute('href');
    element = document.querySelector('[data-id="' + target.substring(1, target.length) + '"]');
    element.style.backgroundColor = a.getAttribute('data-color');

  };
for (var i = els.length - 1; i >= 0; --i) {
  els[i].onclick = function() {
    hideOthers('footnotes-section', 'references-section', 'images-section', 'information-section');
    showPanel('references-section');
    changeColor(this);
  }
}

Thank you!

what are you trying to do,there are multiple ways to do this. If you say what's what you need you will have a better answer — bto.rdz
– bto.rdz, Commented Aug 29, 2015 at 0:39
I have a feel that you just want to simplify code, and to have one function instead 4,5 different functions? — sinisake
– sinisake, Commented Aug 29, 2015 at 0:47
I knew... Pass different arguments to function showPanel(), and based on arguments - run code. If 5 functions do the same thing to 5 different elements on page - yes, you are right, it could/should be one function. — sinisake
– sinisake, Commented Aug 29, 2015 at 9:53
So should I use an object or declare the variables like in the first example? — AnaPM
– AnaPM, Commented Aug 29, 2015 at 12:07

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-08-31 18:47:51Z

1

Updated with a final solution.

In javascript you can declare variables by this way:

var text = ""; // String variable.
var number = 0; //Numeric variable.
var boolValue = true; //Boolean variable.
var arrayValue = []; // Array variable. This array can contain objects {}.
var obj = {}; // Object variable.

Check this version of your code.

// var text = "";            => String variable.
// var number = 0;           => Numeric variable.
// var boolValue = true;     => Boolean variable.
// var arrayValue = [];      => Array variable. This array can contain objects {}.
// var obj = {};             => Object variable.

// This section of code is only to explain the first question.
(function() {
  function showFootnotesPanel() {
    return 10; // Random value.
  }

  function showReferencesPanel() {
    return 30; // Random value.
  }

  function showImagesPanel() {
    return 50; // Random value.
  }

  function showInformationPanel() {
    return 90; // Random value.
  }

  function showPanel() {
    return [
      showFootnotesPanel(), // Index = 0
      showReferencesPanel(), // Index = 1
      showImagesPanel(), // Index = 2
      showInformationPanel() // Index = 3
    ];
  }

  var bigVariable = showPanel(); // bigVariable is array of numeric values.

  // Using logical operator to check status of variable about this demo code.
  if (bigVariable[0] === 10 || bigVariable[1] === 30) {
    console.log("Hey, with these values can show the FootnotesPanel and ReferencesPanel.");
  } else {
    console.log("With the current values can't show anything...");
  }

  console.log(bigVariable);
})();



// https://jsfiddle.net/dannyjhonston/t5e8g22b/
// This section of code attempts to answer the question of this post.
(function() {
  // This function can be executed when the page is loaded.
  function showPanel(panels) {
    var panel, panelVisible = "";
    var selPanels = document.getElementById("selPanels");

    // In panels array...
    for (var i = 0; i < panels.length; i++) {
      // panels[0] = "ReferencesPanel";
      panel = document.getElementById(panels[i]); // Get in the DOM tag context of the panel to set in the variable "panel".
      panelVisible = panel.getAttribute("data-visible"); // HTML5 data attribute.
      if (panelVisible == "true") {
        panel.setAttribute("class", "show");
      } else {
        panel.setAttribute("class", "hide");
      }
    }
  }

  // This function is for set panel visibilty.
  function setPanel(panelId, status) {
    panel = document.getElementById(panelId);
    panel.setAttribute("data-visible", status);

    // Calling the showPanel function to check in the DOM.
    showPanel(["ReferencesPanel", "InformationPanel", "ImagesPanel", "FootnotesPanel"]);
  }

  // Binding the change event to the select tag.
  selPanels.addEventListener("change", function() {
    // Executes setPanel function with panelId and true to update the data-visible attribute in the DOM.
    setPanel(this.options[this.selectedIndex].value, "true");
  });


  // Executes showPanel function with array argument with panels Id. You need to specify every panel that want to handle.
  showPanel(["ReferencesPanel", "InformationPanel", "ImagesPanel", "FootnotesPanel"]);
})();

#global {
  border: solid 1px #6291AD;
}
.tools {
  background-image: linear-gradient(#FFFFFF, #8999CE);
}
#global div[data-visible] {
  height: 80px;
  padding: 5px 0;
}
#global div p {
  padding: 10px;
}
#ReferencesPanel {
  background-image: linear-gradient(#FFFFFF, #FD9A9A);
  float: left;
  width: 20%;
}
#InformationPanel {
  background-image: linear-gradient(#FFFFFF, #A1C7F1);
  float: left;
  width: 80%;
}
#ImagesPanel {
  background-image: linear-gradient(#C6E9FB, #FFF);
  width: 100%;
}
#FootnotesPanel {
  background-image: linear-gradient(#C6E999, #FFF);
  width: 100%;
}
.clear {
  clear: both;
}
.show {
  display: block;
}
.hide {
  display: none;
}

<div id="global">
  <div class="tools">Show Panel:
    <br />
    <!-- Demo -->
    <select id="selPanels">
      <option value="">[SELECT]</option>
      <option value="ReferencesPanel">ReferencesPanel</option>
      <option value="InformationPanel">InformationPanel</option>
      <option value="ImagesPanel">ImagesPanel</option>
      <option value="FootnotesPanel">FootnotesPanel</option>
    </select>
  </div>
  <!-- You need to set data-visible attribute with true or false to show or hide a panel. -->
  <div id="ReferencesPanel" data-visible="false">
    <p>References Panel</p>
  </div>
  <div id="InformationPanel" data-visible="false">
    <p>Information Panel</p>
  </div>
  <div class="clear"></div>
  <div id="ImagesPanel" data-visible="false">
    <p>Images Panel</p>
  </div>
  <div id="FootnotesPanel" data-visible="false">
    <p>Foot notes Panel</p>
  </div>
</div>

edited Aug 31, 2015 at 18:47

answered Aug 29, 2015 at 0:50

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

AnaPM Over a year ago

I know you said "random value" for the return of each function, but what are these values based on?

Danny Fardy Jhonston Bermúdez Over a year ago

For example, you can declare a variable as function result. This code was designed only to show you an initial idea how to declare a variable with previous values of each function that independently returns of a value. It's about your first question. function showPanel() { var x = showFootnotesPanel();showReferencesPanel();showImagesPanel();showInformationPanel();] } By the way, i'm recently checking your last code.

Danny Fardy Jhonston Bermúdez Over a year ago

Your last code it's incorrect. els[i].onclick = function(){showFootnotesPanel(); || showReferencesPanel(); || showImagesPanel(); || showInformationPanel();changeColor(this);} The || operator is a comparison operator where is used in logical statements to determine equality or difference between variables or values. You should try this: if(showFootnotesPanel() == "anyValue" || showReferencesPanel() == "otherValye") I've posted and update about my demo code.

Danny Fardy Jhonston Bermúdez Over a year ago

This link may help you to test any javascript code by yourself. javascriptlint.com/online_lint.php

Danny Fardy Jhonston Bermúdez Over a year ago

I've updated my solution. I hope this helps you. jsfiddle.net/dannyjhonston/t5e8g22b

|

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2017-11-18 02:32:38Z

0

I dont understand your question exactly, but if you want to define a variable that contains other variables then you can use an object.

e.g:

var footNotesPanel = true;
var referencesPanel = true;
var imagesPanel = true;

var showPanels = {
  footNotesPanel: footNotesPanel,
  referencesPanel: referencesPanel,
  imagesPanel: imagesPanel
}

/* 
    Option 2 - for showing/hiding side panels 
    1 ) create all your panels as they would appear, with all the data, but hide them with display:none;
    2 ) call show panel function to show a panel.
*/

var showPanel(panel_id) {
  var panel_element = $("#" + panel_id); /*panel that you want to show ( is hidden atm but somewhere on the page */
  if (!panel_element.length) {
    return false; //no panel with this id currently on page
  } else {
    //check the panel id and do some custom editing if needed, eg.
    if (panel_id == "main_side_panel") {
      //add some additional classes to body element etc
    }
    panel_element.show();

    //Or Another option that you probably are looking for is below
    if (panel_id == "footnotes_panel") {
      showFootnotesPanel();
    } else if (panel_id == "images_panel") {
      showImagesPanel();
    }
  }
}

// And use it like this:
<div id="footnotes_panel" onclick="showPanel('footnotes_panel')"></div>
// Or simply get the element id from `event.target` and use `showPanel()` without arguments.

edited Nov 18, 2017 at 2:32

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

answered Aug 29, 2015 at 0:40

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

2 Comments

AnaPM Over a year ago

I want the side panel with the corresponding information to open, that is, for the function to be able to say: open this panel, or this panel, or this panel or this panel, depending on trigger that I place on the website.

Rainer Plumer Over a year ago

Why dont you just create a generic showPanel function, that accepts the id of the panel you want to show, and then....makes it visible?

Collectives™ on Stack Overflow

How to define a variable of multiple variables in JavaScript

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related