CODEWITHSUNDEEP
javascripthtmlfunctiondomgetelementbyid
the_new_guy
the_new_guy

Reputation: 55

getElementByID for Multiple IDs

    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.

Upvotes: 0

Views: 3120

Answers (8)

Thriggle
Thriggle

Reputation: 7049

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:

Upvotes: 0

user2844991
user2844991

Reputation:

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:

Upvotes: 0

the_new_guy
the_new_guy

Reputation: 55

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

Upvotes: 0

Prudhvi Konda
Prudhvi Konda

Reputation: 297

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.

Upvotes: 1

jon
jon

Reputation: 7

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>

Upvotes: 0

Jim Bodenschatz
Jim Bodenschatz

Reputation: 1

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

Upvotes: 0

Marc B
Marc B

Reputation: 360592

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.

Upvotes: 0

lem2802
lem2802

Reputation: 1162

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>

Upvotes: 2

Related Questions