CODEWITHSUNDEEP
javascripthtml
Bercovici Adrian
Bercovici Adrian

Reputation: 9360

How to get element by id from the same parent

I have a div in which I have a button and a textarea. What is the easiest way to get my hands on a child from a given div by its id?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="main.js"></script>
        <p>Welcome to Adrian's script</p>
    </head>
    <body>
        <div id="Panel">
                <button id="panelBtn" class="button" onclick="method(document.getElementById('panelTxt').innerHTML)"></button>
                <textarea id="panelTxt" class=textarea>Insert text here</textarea>
        </div>
    </body>
</html>

As you can see I want when I press the button to get the INNERHtml from the textarea.

Is there any easy way to get the parent of the element from where make the call ( in my case the button) and get another child by its id?

So what I need is ..given a div with an id i want to access its child with a given id. What is the easiest way of doing this?

<div id="panel">
   <button id="c1"></button>
   <textarea id="c2"></textarea>
</div>

Is there a way to query the children like this or similar ?

document.getElemenyById("panel")["c1"]

Upvotes: 2

Views: 294

Answers (5)

Below the Radar
Below the Radar

Reputation: 7635

You could use a querySelector on the parentNode or parentElement of the button to access the textarea value

function method(str) {
  console.log(str);
}
<div id="Panel">
  <button id="panelBtn" class="button"   
    onclick="method(this.parentNode.querySelector('#anyTextAreaId').value)">Click</button>
  <textarea id="anyTextAreaId" class=textarea>Insert text here</textarea>
</div>

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

First I suggest avoiding the use of inline-event onclick and attach the event in your JS code using addEventListener(), then it will be better to use nextElementSibling property and get the content of the next field using value:

document.getElementById('panelBtn').addEventListener('click', function() {
  console.log(this.nextElementSibling.value);
})
<div id="Panel">
  <button id="panelBtn" class="button">Click Me</button>
  <textarea id="panelTxt" class="textarea">Insert text here</textarea>
</div>

Upvotes: 1

mplungjan
mplungjan

Reputation: 178094

Here is an unobtrusive way to get the value of the textarea after ANY button in the panel

document.querySelectorAll(".panel>button").forEach(function(but) {
  but.addEventListener("click",function(e) {
    e.preventDefault();
    console.log(this.nextElementSibling.value);
  });
});
<div id="panel1" class="panel">
   <button id="c1">Click</button>
   <textarea id="c2">value 1</textarea>
</div>
<div id="panel2" class="panel">
   <button id="c3">Click</button>
   <textarea id="c4">value 2</textarea>
</div>

Here is a way to get any textarea in the parent container

document.querySelectorAll(".panel>button").forEach(function(but) {
  but.addEventListener("click",function(e) {
    e.preventDefault();
    console.log(this.closest("div").querySelector("textarea").value);
  });
});
<div id="panel1" class="panel">
   <button id="c1">Click</button>
   <textarea id="c2">value 1</textarea>
</div>
<div id="panel2" class="panel">
   <button id="c3">Click</button>
   <textarea id="c4">value 2</textarea>
</div>

Upvotes: 1

WrinkledCheese
WrinkledCheese

Reputation: 31

<button type="button" onclick="method( document.getElementById("panelTxt").value )"></button>

Don't include the # in your ID of getElementById as suggested in comments.

Upvotes: 1

Shai Aharoni
Shai Aharoni

Reputation: 1957

You can achieve this by using: this.parentElement.querySelector("#panelTxt")

but take note that id should be unique, so if you plan to have multiple panels, I would suggest that you use class/name selectors instead.

something like this:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="main.js"></script>
        <p>Welcome to Adrian's script</p>
    </head>
    <body>
        <div id="Panel">
                <button id="panelBtn" class="button" onclick="method(this.parentElement.querySelector('.textarea').innerHTML)"></button>
                <textarea id="panelTxt" class="textarea">Insert text here</textarea>
        </div>

    </body>
</html>

Upvotes: 0

Related Questions