One Function, Same Action, Multiple Times On A Page.

[DarkxPunk]

Let me clarify. I have one function function showStuff(){document.getElementById("stuffLink").innerHTML = "<a onclick=\"hideStuff()\">Hide Stuff</a>";document.getElementById("stuff").innerHTML = "stuff";} This function changes a buttons action and displays "stuff". Now say I wanted to display "stuff" multiple times in different places using different buttons. For example <div id="stuff1"><p>This is stuff (<span id="stuffLink"><a onclick=\"showStuff()\">Show Stuff</a></span>)</p></div><div id="stuff"></div><div id="stuff2><p>This is the same stuff (<span id="stuffLink"><a onclick=\"showStuff()\">Show Same Stuff</a></span>)</p></div><div id="stuff"></div> Now this code simply when I click either "Show Stuff" or "Show Same Stuff" will take the first id="stuff" and display "stuff". What I want is if I click "Show Stuff" it will display "stuff" in the first id="stuff" and if I click "Show Same Stuff" it will display "stuff" in the second id="stuff". It must be possible. Now I know I could simply repeat the function and make the id's unique but that is allot of code. Is there a simpler way? Let me know, Thanks!

[smiles]

Hi! Try JQuery.toggle().Also, id is unique indentification, u shouldn't have the same id for many elements

[DarkxPunk]

I personally am interested in not having to use JQuery at the moment. I understand the usage of ids but how would I have it display the same information?

[Don E]

Display "stuff" inside a div when clicked on either one of those links? If so, you can have just one div with an id of stuff(instead of two; you can't have two anyway because id's are suppose to be unique as I'm sure you're aware of) and when one of the buttons are clicked on, that id(div) will be populated with "stuff".

[ShadowMage]

You could pass an id to the function and a reference to the link that was clicked. Then you could use those to set your innerHTML and event attributes:

function showStuff(link, targetID) {  link.innerHTML = "Hide Stuff";  link.onclick = hideStuff;  document.getElementById(targetID).innerHTML = "stuff";}

with HTML:<div id="stuff2><p>This is stuff (<span id="stuffLink"><a onclick="showStuff(this, 'stuff')">Show Stuff</a></span>)</p></div> Notice, in the function, link is a reference (passed in using this) to the link itself instead of the span. This allows you to manipulate the link's properties individually instead of just replacing the innerHTML of the span. Also notice the lack of () on the hideStuff function. This is because when assigning handlers in JavaScript, you must use a reference to the function. If you used the (), it would execute the function and assign the return value to the onclick handler.

[DarkxPunk]

You could pass an id to the function and a reference to the link that was clicked. Then you could use those to set your innerHTML and event attributes:

function showStuff(link, targetID) {  link.innerHTML = "Hide Stuff";  link.onclick = hideStuff;  document.getElementById(targetID).innerHTML = "stuff";}

with HTML:<div id="stuff2><p>This is stuff (<span id="stuffLink"><a onclick="showStuff(this, 'stuff')">Show Stuff</a></span>)</p></div> Notice, in the function, link is a reference (passed in using this) to the link itself instead of the span. This allows you to manipulate the link's properties individually instead of just replacing the innerHTML of the span. Also notice the lack of () on the hideStuff function. This is because when assigning handlers in JavaScript, you must use a reference to the function. If you used the (), it would execute the function and assign the return value to the onclick handler.

I think I understand most, but I am confused on how "this" will in turn supply the separation and not break the first button. Let me fill in this function with how I see it would need to look and tell me if I am right.

function showStuff(link, targetID){link.innerHTML = "Hide Stuff";link.onclick = hideStuff;document.getElementById(targetID).innerHTML = "stuff";}function hideStuff(link, targetID){link.innerHTML = "Show Stuff";link.onclick = showStuff;document.getElementById(targetID).innerHTML = " ";}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>Zeitgeist Toronto</title><script type="text/javascript" src="js.js"></script></head><body><div id="stuff1"><p>This is stuff (<span id="stuffLink"><a onclick="showStuff(this, 'stuff')">Show Stuff</a></span>)</p></div><div id="stuff"></div><div id="stuff2"><p>This is stuff (<span id="stuffLink"><a onclick="showStuff(this, 'stuff')">Show Stuff</a></span>)</p></div><div id="stuff"></div></body></html>

Edit:I gave it a try like this. Each button changed on the first stuff <div id="stuff"></div> and did not change the onclick to reverse the button to hide the content.

[ShadowMage]

I think I understand most, but I am confused on how "this" will in turn supply the separation and not break the first button.

this is a little tricky. It refers to the current scope. You might want to Google scope to get a little better understanding. But long story short, the onclick handler is running in the scope of the element being clicked. So any time you use this within that handler, it will refer to the element being clicked. (There are situations where this changes inside the handler, but that's advanced stuff you don't need to know about right now.)

I gave it a try like this. Each button changed on the first stuff <div id="stuff"></div> and did not change the onclick to reverse the button to hide the content.

Since you need to pass parameters to the functions you'll need to use what is called an anonymous function to assign the onclick handlers:

link.onclick = function() { hideStuff(this, 'link'); }

An anonymous function is basically just a function without a name.

[DarkxPunk]

Truly I am not wrapping my head around "this". I don't get how it will provide what I need. I simply want stuff to be able to appear in the proper area according to the button press, and maybe at the same time.I was hoping I could simplify it, but the reason I need it is this: alpha.zeitgeist-Toronto.comAs you see there is one article. What I want is say I need to display the map more than once but inside a different article on the same page. How can I do that?