Focus on a input field on the click of a button using "this" and "e" as a functi-CodePudding

I have a button. Now, when you click that button, it should focus on an input field (a comment field to be precise). However, in that JavaScript function, I specified "e" as the parameter, and this in the onclick function call. So, using these, I want to able to focus on the input field on the click of the button. Here's the code:

   <input type="text" name="textComment"  placeholder="Write a comment">
<p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'"><?php echo $row["body"]; ?></p>
<div  style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
  <h4  style="cursor: pointer">0 Likes</h4>
  <h4  style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
  <h4  style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div style="margin-left: 715px; position: fixed; font-family: 'Rajdhani'">
  <h2 style="margin-top: 206px; margin-left: -30px; cursor:pointer; padding: 5px; position: fixed"  onclick="textLikeClick(this)"><i ></i> Like</h2>
  <h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed"  onclick="textCommentClick(this)"><i  style="margin-top: 2px;"></i> Comment</h2>
</div>

The JavaScript Function:

function textCommentClick(e) {
  document.querySelector('.textComment').focus();
}

So, in the function, I want to be able to focus on the input field ".textComment" Please help.

CodePudding user response：

Find the nearest ancestor of both of the elements. Let's say it's <div >. Then you can navigate to it with .closest, then get to the child <input> with querySelector.

function textCommentClick(e) {
  e.closest('.grandparent').querySelector('.textComment').focus();
}

<div >
  <input type="text" name="textComment"  placeholder="Write a comment">
  <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'">
    <?php echo $row["body"]; ?>
  </p>
  <div  style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
    <h4  style="cursor: pointer">0 Likes</h4>
    <h4  style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
    <h4  style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
  </div>
  <div>
    <h2 ><i ></i> Like</h2>
    <h2  onclick="textCommentClick(this)"><i  style="margin-top: 2px;"></i> Comment</h2>
  </div>
</div>

But it would be far better to attach the listener properly using JavaScript instead of an inline HTML attribute.

for (const h2 of document.querySelectorAll('.makeComment')) {
  h2.addEventListener('click', () => {
    h2.closest('.grandparent').querySelector('.textComment').focus();
  });
}

<div >
  <input type="text" name="textComment"  placeholder="Write a comment">
  <p style="margin-left: 670px; margin-top: 95px; position: fixed; font-size: 45px; font-family: 'Rajdhani'">
    <?php echo $row["body"]; ?>
  </p>
  <div  style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
    <h4  style="cursor: pointer">0 Likes</h4>
    <h4  style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
    <h4  style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
  </div>
  <div>
    <h2 ><i ></i> Like</h2>
    <h2 ><i  style="margin-top: 2px;"></i> Comment</h2>
  </div>
</div>

CodePudding user response：

For this, you have to select the element with getElementsByClassName then you have to add a click EventListener on the button and call the function as a callback funs that you created.

const button = document.getElementsByClassName('makeComment');
if (button.length) {
   button[0].addEventListener("click", textCommentClick, false);
}

function textCommentClick(e) {
  document.querySelector('.textComment').focus();
}

<input type="text" name="textComment"  placeholder="Write a comment">
<h2 id="_button" style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed"  onclick="textCommentClick(this)"><i  style="margin-top: 2px;"></i> Comment</h2>