0

I would like to know how can I define a bigger variable for a set of variables that I have in : 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!

Improve this question
4
  • 1
    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 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? 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. Commented Aug 29, 2015 at 9:53
  • So should I use an object or declare the variables like in the first example? Commented Aug 29, 2015 at 12:07

2 Answers 2

Reset to default
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>

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

9 Comments

I know you said "random value" for the return of each function, but what are these values based on?
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.
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.
This link may help you to test any javascript code by yourself. javascriptlint.com/online_lint.php
I've updated my solution. I hope this helps you. jsfiddle.net/dannyjhonston/t5e8g22b
|
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.
Improve this answer

2 Comments

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.
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?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.