Why I need 4 previousSibling to get 2 previous element?

Question

In this example, I want to get the value of 2 previous sibling

But this is not work btn.previousSibling.previousSibling.value

I need use 4 previousSibling to get the value, why 4?

<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
    console.log(btn.previousSibling.previousSibling.previousSibling.previousSibling.value)
}
</script>
</head>
<body>
    <textarea></textarea>
    <br>
    <button onclick="text(this)">text</button>
</body>
</html>

what is the expected output? I cannot find 4 siblings of button — brk, May 15 '18 at 09:58
@brk He is asking..to get the result of the text box... why we need to have 4x `previousSibling` properties — Himanshu Bansal, May 15 '18 at 09:58
That has to do with text nodes, if you remove the indentation, enters and and spaces around the tags ` — Isac, May 15 '18 at 09:59
@CL So 1st sibling is button..2nd is text..3rd is br..then 4th is textarea..from where you get the value — Himanshu Bansal, May 15 '18 at 10:02

score 3 · Accepted Answer · answered May 15 '18 at 10:00

previousSibling points to the previous Node, which is new line (a TextNode) in your example. You might want to use previousElementSibling instead

function text(btn){
  console.log(
    btn
      .previousElementSibling
      .previousElementSibling
      .value
  );
}

<textarea>Hello</textarea>
<br>
<button onclick="text(this)">text</button>

score 0 · Answer 2 · answered May 15 '18 at 10:00

It can be because of empty entries inserted by the browser :

https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

this code works in your case :

<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
    alert(btn.previousSibling.previousSibling.value);
}
</script>
</head>
<body>
    <textarea>test text</textarea><br><button onclick="text(this)">text</button>
</body>
</html>

You can use JQuery $(btn).prev().prev();

Like :

<!DOCTYPE HTML>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
function text(btn){
    alert($(btn).prev().prev().val());
}
</script>
</head>
<body>
    <textarea>test text</textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>

score 0 · Answer 3 · answered May 15 '18 at 10:05

The reason is because of the br element. You can get the parent using parentNode and queryselector to get the specific element.

function text(btn) {
  var getText = btn.parentNode.querySelector('textarea').value;
  console.log(getText.trim())
}

<textarea></textarea>
<br>
<button onclick="text(this)">text</button>

Why I need 4 previousSibling to get 2 previous element?

3 Answers3