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

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

• javascript
• html

• To get an element by id: Element.getElementById("main");. Is that what you're asking? – chRyNaN Commented May 7, 2015 at 22:39
• He wants to find out the ID, – Barmar Commented May 7, 2015 at 22:39
• when i click the button i want to get the id of the 2 divs. – Lutianna Commented May 7, 2015 at 22:40
• 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 Commented May 7, 2015 at 22:41
• 6 Can people stop voting this down, this is a reasonable question. Not everybody goes though the same path of learning as you! – maximumcallstack Commented May 7, 2015 at 22:53

3 Answers 3

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>

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/

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>