Get the array number of a clicked elements parent node

Question

I need to be able to click the button and have its parents array number returned so that i can apply a style to only one of the many divs with the same class name, i would like to do this in vanilla javascript if possible.

    <div class="contentBox">
            <button onclick="expand()" class="contentBoxButton"> + </button>
            <title>Lorem Ipsum Here</title>
            <p> 
                Lorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum HereLorem Ipsum 
            </p>
        </div>
       <script>
         function expand(){
            var button = document.getElementsByClassName('contentBoxButton');
            var parent = button.parentNode;
            parent.style.height = '200px';

        }
       </script>

If you just want to get a reference to the parent element, you can use the [`.parentNode` property](https://developer.mozilla.org/en-US/docs/Web/API/Node.parentNode) of the ` — Felix Kling, Oct 01 '14 at 01:57
@felix Kling from what i understand class's are considered arrays in javascript so if i just get parentNode when i apply styling it will apply to all divs with that class name and i just want to apply styling to the parent of the button pressed and only that one div. — Plentybinary, Oct 01 '14 at 02:04
u tagged array and mentioned array, but no presence of it in your code. You 'would like to do this in vanilla js' but no javascript here. What have u tried in js ? — Jay Harris, Oct 01 '14 at 02:05
`.parentNode` returns a single DOM node. A node can only have a single parent. It doesn't matter which classes the element has. Changing the style of a single node does not affect other nodes with the same class. Give it a try! — Felix Kling, Oct 01 '14 at 02:06
how would i get the parentNode of the button clicked if i have upwards of 50 divs almost identical to this one? — Plentybinary, Oct 01 '14 at 02:15
I have a few ideas, but I can't say I'm very motivated to work them out without any base of script from your side.. oh, and I have NEVER heard anyone refer to an element with a class, as an array — myfunkyside, Oct 01 '14 at 02:16
http://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name — Plentybinary, Oct 01 '14 at 02:24
It sounds like you just want to refer to `this.parentNode` in your client event handler so that you can get the parent of the clicked upon element even if the same event handler code is used by lots of different elements. To get the value of `this`, you either have to pass it to your HTML `onclick=xxx(this)` or use `addEventListener()` to add the event handler instead. — jfriend00, Oct 01 '14 at 02:29
so something like this? ' this.parentNode.style.height = "200px";' — Plentybinary, Oct 01 '14 at 02:35

myfunkyside · Accepted Answer · 2014-10-01T02:47:01.613

Credit to Felix Kling for the comment on .parentNode

The reason you didn't get an individual element is because you start off with accessing the clicked button by its class..
var button = document.getElementsByClassName('contentBoxButton');
..which indeed will give you a Node List of all elements with that class.
And consequently, the call to parentNode in the line after that will either not work, or result is another list of all the parents..

This is what you need to make it work:

fiddle: http://jsfiddle.net/13pkrabq/3/

HTML

<div class="contentBox">
    <button onclick="expand(this)"> + </button>
    <p>
        Text Text Text 
    </p>
</div>

JS

function expand(btn) {
    btn.parentNode.style.height = "200px";
}

CSS

.contentBox {
    background-color:#777777;
}

(I've added the CSS to make the contextBox visible)

@Plentybinary - saw your last comment to your question just now.. referring to the `parentNode` directly without first storing it into a variable is indeed better. So in my answer, like this: `btn.parentNode.style.height = "200px";`. (Already updated my answer) — myfunkyside, Oct 01 '14 at 02:50

score 0 · Answer 2 · answered Oct 01 '14 at 04:13

If it's the div you want to expand, consider putting the listener on that so you don't have to go looking. Pass a reference to the div using this, then use the button value to open or close the div.

Toggle the value of the button between "+" and "-" at the same time and use classes to apply the CSS:

<div onclick="expand(this)">
  <input type="button" value="+" class="expandContentButton">
  <span class="title">Foo bar</span>
  <p class="contentPara">here is the content</p>
</div>

<script>
  function expand(el) {
    var cb = el.querySelectorAll('.expandContentButton')[0];
    if (cb == event.target || cb == event.srcElement) {
      el.className = cb.value == '+' ? 'open' : 'closed';
      cb.value = cb.value == '+' ? '-' : '+';
    }
  }
</script>

and some CSS:

<style type="text/css">
  .title {
    font-weight: bold;
    font-size: 150%;
  }
  .open {}

  .closed {
    height: 30px;
    overflow: hidden;
  }

  .expandContentButton {
    text-align: middle;
    width: 3em;
  }
</style>

Get the array number of a clicked elements parent node

2 Answers2