getElementByID for Multiple IDs

Question

    function show() { 
        if(document.getElementById('intake').style.display=='none') { 
            document.getElementById('intake').style.display='block'; 
        } 
        false;
    } 
    function hide() { 
        if(document.getElementById('intake').style.display=='block') { 
            document.getElementById('intake').style.display='none'; 
        } 
        false;
    }

 <div id="opener"><a href="#1" name="1" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
    <div id="intake" style="display:none;">Text
           <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
    </div> 
    
    
 <div id="opener"><a href="#1" name="2" onmouseover="show();" onclick="show();" onmouseout="hide();" >click here</a></div> 
    <div id="intake" style="display:none;">text
           <div id="upbutton"><a onmouseout="hide();">click here</a></div> 
    </div>

I wrote two functions and I need them to grab the ID of what ever the user clicked. and display that information. I don't want to have to write a different function for each ID as I have quite a few. Can someone please point me in the right direction.

    function show() { 
        if(document.getElementById('this is where all of the divs would go i presume').style.display=='none') { 
            document.getElementById('this is where all of the divs would go i presume').style.display='block'; 
        } 
        false;
    }

I just figured I would add the whole thing to alleviate any confusion.

I don't get what you are asking. `getElementById` is for locating a unique element in your DOM. If you want to grab a bunch at the same time, use other function like `getElementByClassName` or `querySelectorAll`. — Derek 朕會功夫, Aug 31 '15 at 18:57
Just one thing - how you will click element with display:none? — sinisake, Aug 31 '15 at 19:02
First - you can't have multiple ids on page, use classes instead. — sinisake, Aug 31 '15 at 19:15
hmmm... so i changed to getelementbyclass but that seems to have broken the whole thing — the_new_guy, Aug 31 '15 at 19:18
@the_new_guy, do you actually want toggle functionality? http://jsfiddle.net/nh4zq2od/ Please check example. Also, there is no sense to use two events for same thing, could be confusing... — sinisake, Aug 31 '15 at 19:24
Yes however I have about 30 different text popups that I want to happen. if that makes any sense. also the 2 functions that I am using one shows the next hides so its not exactly the same. — the_new_guy, Aug 31 '15 at 19:28
also its not just a toggle. I have the onclick if youre on a mobile devise and an onmouseover if youre on desktop — the_new_guy, Aug 31 '15 at 19:32

score 2 · Answer 1 · answered Aug 31 '15 at 18:58

2

do something like this:

<div onclick='show(this)'>click me</div>

<script>    
    function show(element) { 
        if(element.style.display=='none') { 
            element.style.display='block'; 
        } 
        return false;
    } 
</script>

answered Aug 31 '15 at 18:58

lem2802

1,152
7
18

score 1 · Answer 2 · edited Aug 31 '15 at 19:35

1

You can use the class selector of jquery. https://api.jquery.com/class-selector/

You can add an action to elements with the same class. Once that action is triggered, you can get the id of the element by using the keyword this.

edited Aug 31 '15 at 19:35

Barett

5,826
6
51
55

answered Aug 31 '15 at 19:02

Prudhvi Konda

297
1
7

score 0 · Answer 3 · answered Aug 31 '15 at 18:59

0

Don't do that. The click event will contain a pointer to the DOM object on which the click occured:

https://api.jquery.com/event.target/

<script>
$( "body" ).click(function( event ) {
  $( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>

That means there's absolutely NO need to assign an ID to each of them just so you can target it for a click handler.

answered Aug 31 '15 at 18:59

Marc B

356,200
43
426
500

Isn't that assuming he's using jQuery? – Darren Wainwright Aug 31 '15 at 19:02
yes, but jquery is just a JS wrapper. the event stuff works basically the same in plain JS. – Marc B Aug 31 '15 at 19:02
I am still trying to figure this out I havent even touched JQuery yet – the_new_guy Aug 31 '15 at 19:09
don't be afraid of jquery. it's extremely powerful, and makes JS a lot more pleasant to use. – Marc B Aug 31 '15 at 19:10

score 0 · Answer 4 · edited May 23 '17 at 10:33

If you know the ID of the button/link/control, you can pass that into the function, like this:

function show(id) { 
        if(document.getElementById(id).style.display=='none') { 
            document.getElementById(id).style.display='block'; 
        } 
        false;
    }

If you aren't able to explicitly pass the id into the function for each button, you can retrieve it dynamically using something like this:

Getting the ID of the element that fired an event

jon · Answer 5 · 2015-08-31T19:21:51.227

JavaScript:

function DivShow(elm)
{
   if(elm.style.display=="block") {elm.style.display="none"};
} 

<div id="Div1" onclick="DivShow(this);" > Some stuff here </div>
<div id="Div2" onclick="DivShow(this);" > Some  Other stuff here </div>

If you have JQuery loaded... Jquery:

function DivShow(elm)
{
   if( $(elm).css("display") =="block" ) {$(elm).css("display", "none")};
} 
<div id="Div1" onclick="DivShow(this);" > Some stuff here </div>
<div id="Div2" onclick="DivShow(this);" > Some  Other stuff here </div>

score 0 · Answer 6 · answered Aug 31 '15 at 19:58

So I figured out what was wrong with my script. I in the deceleration I didnt put ID I changed it to

    function show(id) { 
        if(document.getElementById(id).style.display=='none') { 
            document.getElementById(id).style.display='block'; 
        } 
        false;
    }

Works like a charm

score 0 · Answer 7 · 2015-08-31T20:15:31.803

What you need is something called event delegation. How it works? Let's take the following html.

<p id="first">i am first</p>
<p id="second">i am second</p>

<hr/>

<p class="hide-trigger" data-find="first">hide first</p>
<p class="hide-trigger" data-find="second">hide second</p>

As you can see, there are two elements with the class "hide-trigger". Let's assume you want to use the first "hide-trigger" to hide the first paragraph and the second "hide-trigger" to do the same with the second one.

Obviously, you don't want to write the same logic twice just because you want to hide different elements. We can store the id of the element you want to hide inside a data attribute. I chose data-find, but you can choose anything you want. This is not event delegation, by the way, this just solves the problem of data transferring. Also, I will use the following function to hide elements:

function hide (element) {
  if ( window.getComputedStyle(element).display === 'block' ) { 
     element.style.display = 'none'; 
  }
}

Event delegation is a technique in which you don't attach the event listeners on individual elements in the DOM, but rather on a parent of those elements. For simplicity, I chose the body tag, but any ancestor element in the DOM tree would work just fine as long as all the elements you're interested in are contained. When a click happens, the event will "bubble up" from the "target", the element that was clicked, up the DOM tree until it reaches the body. There you can check if you're interested in the element that was clicked and if you are, you can do whatever. In your case, you want to get the id of the element to be hidden and hide it. Here's how you can do that.

document.body.addEventListener('click', function (e) {
    var target = e.target;

    // check if a 'hide-trigger' was clicked
    if ( target.classList.contains('hide-trigger') ) {

       var id = target.dataset['find'];
       var element = document.getElementById(id);
       hide(element);

    }

}, false);

To be sure the body tag exists you can wrap everything inside:

document.addEventListener('DOMContentLoaded', function () {
   // code goes here
}, false);

Learn more:

Thriggle · Answer 8 · 2016-05-03T19:37:22.720

You can cache the results of the DOM query for a performance benefit on most browsers.

function show(id) { 
    var element = document.getElementById(id);
    if(element.style.display=='none') { 
        element.style.display='block'; 
    } 
    return false;
}

If you want a function that shows multiple elements at once, you can use a CSS selector in combination with document.querySelectorAll:

function showAll(selector) { 
    var elements = document.querySelectorAll(selector);
    for(var i=0, len = els.length; i < len; i++){
        if(elements[i].style.display=='none') { 
            elements[i].style.display='block'; 
        } 
    }
    return false;
}

For example, showAll(".myclass"); would show all element with the class name "myclass", showAll("li"); would show all <li> elements, and showAll("#intake"); would show all elements with an ID field set to "intake".

Check out the CSS selectors references below to learn more:

W3 Consortium
Mozilla Developers Reference
Microsoft's Guide to Understanding CSS Selectors
And of course, the much-maligned W3Schools CSS Selectors Reference

getElementByID for Multiple IDs

8 Answers8