javascript onclick get the div id?

Question

Is it possible to get the ids of the 2 div tags on clicking the button, using javascript?

<div id="main">
<div id="content">
</div>
<button onclick="function();">show it</button>
</div>

I have 2 div tags here. The 1st div is in the main div while the content div is inside the main div and the button is inside the main div as well.

Is it possible to get the main and content id of the 2 div tags on clicking the button?

EXPECTED OUTPUT when I press the button:

alert: main
alert: content

To get an element by id: `Element.getElementById("main");`. Is that what you're asking? — chRyNaN, May 07 '15 at 22:39
You know the ordering of the HTML. So you can just get the parent nodes and then get the ID attribute of each node. — chRyNaN, May 07 '15 at 22:41
how about i have alot of divs and i have a button inside of each divs i want to get the id of the div when i click the button of what inside of the div. — Lutianna, May 07 '15 at 22:42
Can people stop voting this down, this is a reasonable question. Not everybody goes though the same path of learning as you! — frontsideup, May 07 '15 at 22:53

score 9 · Accepted Answer · answered May 07 '15 at 22:44

9

You need to pass the element to the function. Then you can use parentNode to get the DIV that contains the button. From there, you can use querySelector to find the first DIV in the parent.

function showIt(element) {
  var parent = element.parentNode;
  alert(parent.id);
  var content = parent.querySelector("div");
  alert(content.id);
}

<div id="main">
  <div id="content">
  </div>
  <button onclick="showIt(this);">show it</button>
</div>
<div id="main2">
  <div id="content2">
  </div>
  <button onclick="showIt(this);">show it</button>
</div>
<div id="main3">
  <div id="content3">
  </div>
  <button onclick="showIt(this);">show it</button>
</div>

answered May 07 '15 at 22:44

Barmar

741,623
53
500
612

If you are going to use `querySelector`, you can also use `element.previousElementSibling` or `element.parentNode.firstElementChild`, which I think would be better suited in this case. – May 07 '15 at 23:14
Good point, I'm not very familiar with those properties. My first attempt used `firstChild`, and it was failing because of the text node before the DIV, so I switched to `querySelector`. – Barmar May 07 '15 at 23:16
Ah yeah, those sometimes return text nodes. The xElementY properties always return element nodes. – May 07 '15 at 23:19
http://jsfiddle.net/myel/a9d5y9gs/ i have code added as i implement your answer but im having an error on it it keeps duplicating. – Lutianna May 07 '15 at 23:32

score 1 · Answer 2 · answered May 07 '15 at 22:42

1

document.getElementById('button').onclick = function () {
    var divs = document.querySelectorAll('div');
    for (var i = 0; i < divs.length; i++) {
        var id = divs[i].getAttribute('id');
        alert(id);
    }
};

http://jsfiddle.net/jm5okh69/1/

answered May 07 '15 at 22:42

Miguel Mota

20,135
5
45
64

how about i have alot of divs and i have a button inside of each divs i want to get the id of the div when i click the button of what inside of the div – Lutianna May 07 '15 at 22:43
1

This will work, but it's going to be really fragile. Not an issue with the solution, but an issue with the question. Are there other on the page? If so, you'll get their IDs as well. – crowhill May 07 '15 at 22:43

score 1 · Answer 3 · answered May 07 '15 at 22:51

1

This should work in all browsers and uses the cleaner .id method.

var button = document.getElementById('button');

button.onclick = getIDs;

function getIDs(){
 var id,divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {        
         id = divs[i].id //  .id is a method 
        alert(id);
    }
}

<div id="main">
    <div id="content"></div>
    <button id="button">show it</button>
</div>

answered May 07 '15 at 22:51

frontsideup

2,833
1
21
23

Hi @Myel Rather than trying to approach a solution can you please simply describe what you are trying to do in detail without being technical. – frontsideup May 08 '15 at 00:20

javascript onclick get the div id?

3 Answers3

Linked