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" class="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 class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 class="textDataReactions" 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" class="textLike" onclick="textLikeClick(this)"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" 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.
Find the nearest ancestor of both of the elements. Let's say it's <div class="grandparent">. 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 class="grandparent">
<input type="text" name="textComment" class="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 class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 class="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div>
<h2 class="textLike"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" 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 class="grandparent">
<input type="text" name="textComment" class="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 class="textPostData" style="position:fixed; font-family: 'Rajdhani'; margin-left: 820px; margin-top: 150px">
<h4 class="textDataLikes" style="cursor: pointer">0 Likes</h4>
<h4 class="textDataComments" style="margin-left: 102px; margin-top: -42px; cursor: pointer">0 Comments</h4>
<h4 class="textDataReactions" style="margin-left: 240px; margin-top: -42px; cursor: pointer">0 Reactions</h4>
</div>
<div>
<h2 class="textLike"><i class="fa fa-thumbs-up"></i> Like</h2>
<h2 class="makeComment"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>
</div>
</div>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" class="textComment" placeholder="Write a comment">
<h2 id="_button" style="margin-left: 99px; margin-top: 206px; cursor:pointer; padding: 5px; position: fixed" class="makeComment" onclick="textCommentClick(this)"><i class="fa fa-comment" style="margin-top: 2px;"></i> Comment</h2>