Beta Particle Beta Particle - 16 days ago 6
HTML Question

Mutiple buttons with the same name showing different divs

I have a large amount of buttons all used to display a div before it, my question is instead of having 20 different javascript functions which all do the same thing, is it possible to do with one? By default i have the display set to none in the CSS.

HTML:

<div class="col-lg-6 event-title">
<span>Special Olympics Unified Snowboarding Final</span>
<dd>SLOPESTYLE</dd>

<div id ="#dropdown">
<h6>2016 RESULTS</h6>
<p>
GOLD - Chris Klug & Henry Meece<br>
SILVER - Danny Davis & Zach Elder<br>
BRONZE - Hannah teter & Daina Shilts
</p>
</div>
</div>

<div class="col-lg-1">
<button type="button" id = "#drop-button" class="btn btn-default btn-lrg">&#x25BC</button>
</div>

<div class="col-lg-6 event-title">
<span>Special Olympics Unified Snowboarding Final</span>
<dd>SLOPESTYLE</dd>

<div id ="#dropdown1">
<h6>2016 RESULTS</h6>
<p>
GOLD - Chris Klug & Henry Meece<br>
SILVER - Danny Davis & Zach Elder<br>
BRONZE - Hannah teter & Daina Shilts
</p>
</div>
</div>

<div class="col-lg-1">
<button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">&#x25BC</button>
</div>


JavaScript:

document.getElementById("#drop-button").addEventListener("click", function(){
document.getElementById("#dropdown").style.display="block";
});

document.getElementById("#drop-button1").addEventListener("click", function(){
document.getElementById("#dropdown1").style.display="block";
});

Answer

Create an outer div

<div id='container'> 
 your other divs
</div>

then assign a query selector to the div container and specify what events you want to track like click , change etc.

var g = {};

g.formClass = function()
{
   /*call this method with <body onload = g.c.assignEventListeners();>*/
   this.assignEventListners = function()
   {
    /*event listener for all links in the container div*/
    container = document.querySelector("#container");
    container.addEventListener("click", g.c.containerRouter, false);
    container.addEventListener("change", g.c.containerRouter, false);
  };

send the events to a router, to detect what was touched in the div container and execute your specific code

Here are some examples of how you can monitor the events and make decision on what you want to do.

this.containerRouter = function (e) 
{
    if (e.target !== e.currentTarget) 
    {
        /*Reference the event's target id*/
        if (e.target.id.indexOf('drop-button')>-1)
        {
            /*
             use the .split( ) method to extract the button #
             this puts the parts into an array you can reference
            */
            var divNum = e.target.id.split('drop-button');
            document.getElementById('#dropdown'+divNum[1]).style.display="block";
        }
        /*Reference the event's target class along with the type of event*/
        if (e.target.classList[0]=='selMe' && e.type=='click')
            document.getElementById(e.target.id).select();
        if (e.target.classList[1]=='subMe' && e.type=='change')
            g.c.subTotHrs(e);
    }
    e.stopPropagation();
  };
}
g.c = new g.formClass;

You can access anything from the event's target like id, class, value etc. You can evaluate what type of event occurred. There simply are a whole lot more options available to you.

You can assign the query selector to the whole document or narrow down the scope to a node so for example, if you are dynamically populating a table with buttons or text fields they can all be checked with this one event listener

pass along the event ....(e) and your functions/methods/sub-routines can use it to get or place useful information.

In this example I wrapped all the code in a global object. You can choose to do the same or not, just changed the references to the functions/methods you wish to execute. I included more than you needed just to show some of the possibilities.

Here is the code needed for your specific question

HTML

<div id ='container'>
    <div class="col-lg-6 event-title">
        <span>Special Olympics Unified Snowboarding Final</span>
        <dd>SLOPESTYLE</dd>

        <div id ="#dropdown1">
            <h6>2016 RESULTS</h6>
            <p>
             GOLD - Chris Klug & Henry Meece<br>
             SILVER - Danny Davis & Zach Elder<br>
             BRONZE - Hannah teter & Daina Shilts
             </p>
        </div>
    </div>

    <div class="col-lg-1">
        <button type="button" id = "#drop-button1" class="btn btn-default btn-lrg">&#x25BC</button>
    </div>
</div>

javaScript

function assignEventListners(){
    container = document.querySelector("#container");
    container.addEventListener("click", containerRouter, false);
}

function containerRouter(e) {
    if (e.target !== e.currentTarget){
        if (e.target.id.indexOf('drop-button')>-1){
            var divNum = e.target.id.split('drop-button');
            document.getElementById('#dropdown'+divNum[1]).style.display="block";
        }
    }
    e.stopPropagation();
}
Comments