Jump to content

How to carry action on div based upon id but still be reusable


DarkxPunk
 Share

Recommended Posts

Hey everyone, The title may be a bit confusing, so let me explain. My goal is to have a div appear below another div based upon the id used. Now there will be multiple of these, so I need the JS function to be reusable. Currently I have the HTML like so:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>LED</title>  <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8">  <script src="js/script.js" charset="utf-8"></script></head><body>  <div id="pageWrap">   <div class="row" id="row1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="info" id="info1">Info</div>   <div class="info" id="info2">Info</div>   <div class="info" id="info3">Info</div>   <div class="info" id="info4">Info</div>  </div></body></html>

the CSS like so:

body {padding: 0;margin: 0;border: 0;width: 100%;height: 100%;font-size: 100%;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}h1,h2,h3,h4,h5,h6,p {color: #000000;}h4,p {font-size: 1em;}#pageWrap,.row,.info {width: 900px;margin: 0 auto;}.row,.info {width: 225px;float: left;}.info {display: none;}

and the JS like so:

function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}

Now as you will notice I have each Row id numbered, and each Info id numbered, along with that the Info divs fit under the Row divs. What I would like is if I hit Row1 it will show Info1, if I hit Row2 it will show Info2, etc. I could achieve this by creating a new JS function for each use, but that would be a waste. Any ideas how to automate this with one single function? Also if you have any ideas of how to keep the placement of the Info divs while still hiding it, that would be appreciated as well. Honestly though I think I could eventually figure that one out, still need the help with the JS though. :D Thanks for the help. P.S. I am still learning JS, once I get this down I won't need to ask for such noobie questions.

Link to comment
Share on other sites

An easy way that wouldn't depend on the node structure would be to get the element's ID, remove "row" to get just the number, add the number to "info" and use that as the ID of the element to show. That's going to require that you use "row#" and "info#" for your elements, but it won't require you to use a certain node structure in your HTML.

Link to comment
Share on other sites

An easy way that wouldn't depend on the node structure would be to get the element's ID, remove "row" to get just the number, add the number to "info" and use that as the ID of the element to show. That's going to require that you use "row#" and "info#" for your elements, but it won't require you to use a certain node structure in your HTML.
I understand, I just don't know how to achieve that. Could you offer up some sample code I could sort my head through? I learn this allot easier through reverse engineering code than I do trying to build it up from very little knowledge (my very little knowledge) of JS. Thanks for the help.
Link to comment
Share on other sites

Since I typically don't remember which methods to use, I usually search for Javascript string methods and look for the MDN reference, which is here: https://developer.mo..._Objects/String In the list of methods for string instances, you can see the replace method there. That's one option. You can also use substr or substring, or a combination of split and join. Each of those references include examples.

Link to comment
Share on other sites

think it through. Basically you are just using the numeric part of the ID of one element to get a mapping to another element. They key being that you need some sort of delimiter between the string and the number so you can split on it. so, taking what you have (with a delimiter added to row)

   <div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="info" id="info1">Info</div>   <div class="info" id="info2">Info</div>   <div class="info" id="info3">Info</div>   <div class="info" id="info4">Info</div>

we can implement JSG's suggestion

//get and store all info divs ahead of timevar infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){  var div = document.getElementsByTagName('div')[i];  if(div.className === 'info'){	infoDivs.push(div);  }}; function hideShow(element) {  var idNum = element.id.split('_')[1];  //split the passed in element and get the number   //loop through the divs and show/hide the one want based on the number match of the one clicked  for(var i = 0, l = infoDivs.length; i < l; i += 1){    var div =  infoDivs[i];    div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'hide';  }}

now of course I just wrote this, so make sure you test and debug on your own with the error console open

Edited by thescientist
Link to comment
Share on other sites

Thank you for all your help, but I am not wrapping my head around this it seems and the code you provided is not seeming to work. Any ideas? Now I am not getting any errors with it, but its just not supplying any results. Thanks for any help.

Link to comment
Share on other sites

i have no way of knowing your implementation of the code without seeing the changes you've made to the code. Do you know how to log to the console so you can test variables and value to make sure you know what they are?

Edited by thescientist
Link to comment
Share on other sites

Well all I did was copy and paste your code. Made no changes. So the implementation is the same. I checked the console and nothing comes up. I am using Coda 2 for Mac which uses the stuff built into WebKit. Here is everything again: HTML:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>LED</title>  <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8">  <script src="js/script.js" charset="utf-8"></script></head><body>  <div id="pageWrap">   <div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div>   <div class="info" id="info1">Info</div>   <div class="info" id="info2">Info</div>   <div class="info" id="info3">Info</div>   <div class="info" id="info4">Info</div>  </div></body></html>

CSS:

body {padding: 0;margin: 0;border: 0;width: 100%;height: 100%;font-size: 100%;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}h1,h2,h3,h4,h5,h6,p {color: #000000;}h4,p {font-size: 1em;}#pageWrap,.row,.info {width: 900px;margin: 0 auto;}.row,.info {width: 225px;float: left;text-align: center;}.info {display: none;}

JS:

/*function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}*///get and store all info divs ahead of timevar infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){  var div = document.getElementsByTagName('div')[i];  if(div.className === 'info'){		infoDivs.push(div);  }}; function hideShow(element) {  var idNum = element.id.split('_')[1];  //split the passed in element and get the number   //loop through the divs and show/hide the one want based on the number match of the one clicked  for(var i = 0, l = infoDivs.length; i < l; i += 1){	var div =  infoDivs[i];	div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'hide';  }}

Link to comment
Share on other sites

An issue may be the execution of the initial infoDivs loop. try wrapping all that JS code in a window.onload function. i.e.

window.onload = function(){//code goes here}

the loop is happening before the HTML content is available in the DOM. Also, I noticed I made a mistake, and 'hide' should be 'none'; Aside from that, you will need to add your own debugging and test that the function is firing, that elements and variables are what you expect them to be, that the loops are running, etc.

Edited by thescientist
Link to comment
Share on other sites

It keeps saying it cant find the var InfoDivs. I am sorry to be such a hassle I am just very new to wrapping my head around JS. I went through the tutorial and still am pretty much at a loss. I did make my own clock though :P Lol.

Link to comment
Share on other sites

please provide the updated code, or update your post. It should give you a line number for the error too, which you can indicate to use which part of the code that error is happening on.

Edited by thescientist
Link to comment
Share on other sites

HTML:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>LED</title><link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"><script src="js/script.js" charset="utf-8"></script></head><body><div id="pageWrap"><div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="info" id="info1">Info</div><div class="info" id="info2">Info</div><div class="info" id="info3">Info</div><div class="info" id="info4">Info</div></div></body></html>

JS:

/*function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}*/ //get and store all info divs ahead of timewindow.onload = function(){var infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){var div = document.getElementsByTagName('div')[i];if(div.className === 'info'){infoDivs.push(div);}}}function hideShow(element){var idNum = element.id.split('_')[1];  //split the passed in element and get the number//loop through the divs and show/hide the one want based on the number match of the one clickedfor(var i = 0, l = infoDivs.length; i < l; i += 1){var div =  infoDivs[i];div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'none';}} /*window.onload = function(){//code goes here}*/

Link to comment
Share on other sites

All you have to do is swap 'info' for 'row'

function hideShow(a) {a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)show_hide.style.display == 'block' ? show_hide.style.display='none' : show_hide.style.display='block';}

Link to comment
Share on other sites

HTML:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>LED</title><link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8"><script src="js/script.js" charset="utf-8"></script></head><body><div id="pageWrap"><div class="row" id="row_1">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_2">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_3">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="row" id="row_4">Row (<a href="#" onclick="hideShow(this)">Show Info</a>)</div><div class="info" id="info1">Info</div><div class="info" id="info2">Info</div><div class="info" id="info3">Info</div><div class="info" id="info4">Info</div></div></body></html>

JS:

/*function hideShow(a) {var element = a.parentNode.nextSibling;while (element.className != 'info') {element = element.nextSibling;}element.style.display = element.style.display == 'block' ? 'none' : 'block';a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';}*/ //get and store all info divs ahead of timewindow.onload = function(){var infoDivs = [];for(var i = 0, l = document.getElementsByTagName('div').length; i < l; i+=1){var div = document.getElementsByTagName('div')[i];if(div.className === 'info'){infoDivs.push(div);}}}function hideShow(element){var idNum = element.id.split('_')[1];  //split the passed in element and get the number//loop through the divs and show/hide the one want based on the number match of the one clickedfor(var i = 0, l = infoDivs.length; i < l; i += 1){var div =  infoDivs[i];div.style.display = (div.id.index(idNum) >= 0) ? 'block' : 'none';}} /*window.onload = function(){//code goes here}*/

where's the error?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...