Category: JavaScript Answers

Sometimes, we want to check which element has been clicked with jQuery.

In this article, we’ll look at how to check which element has been clicked with jQuery.

How to check which element has been clicked with jQuery?

To check which element has been clicked with jQuery, we can add a click event listener to the body element.

Then we can check which element is clicked inside the click event handler with the is method.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<p>
  foo
</p>

<div>
  bar
</div>

<section>
  baz
</section>

to add a few elements into the page.

Then we write:

$('body').click((e) => {
  const target = $(e.target);
  if (target.is('p')) {
    console.log('p clicked')
  } else if (target.is('div')) {
    console.log('div clicked')
  } else if (target.is('section')) {
    console.log('section clicked')
  }
});

We select the body element with $.

Then we call click on it with a callback that gets the clicked element with the e.target property.

Then we check for what’s clicked with the is method called with the selector we’re checking for.

Therefore, when we click on different elements, we should see different text logged.

Conclusion

To check which element has been clicked with jQuery, we can add a click event listener to the body element.

Then we can check which element is clicked inside the click event handler with the is method.

Sometimes, we want to add a click event listener on div tag using JavaScript.

In this article, we’ll look at how to add a click event listener on div tag using JavaScript.

How to add a click event listener on div tag using JavaScript?

To add a click event listener on div tag using JavaScript, we can call the addEventListener method on the selected div.

For instance, we write:

<div class='drill_cursor'>
  hello world
</div>

to add a div with a class.

Then we write:

const div = document.querySelector('.drill_cursor');

div.addEventListener('click', (event) => {
  console.log('Hi!');
});

We select the div with document.querySelector.

Then we call addEventListener with 'click' to add a click event listener.

And then we set the click event listener to a function that logs 'Hi!' in the console.

Therefore, when we click on the div, we should see 'Hi!' logged.

Conclusion

To add a click event listener on div tag using JavaScript, we can call the addEventListener method on the selected div.

Sometimes, we want to get the response JSON and response status with JavaScript fetch.

In this article, we’ll look at how to get the response JSON and response status with JavaScript fetch.

How to get the response JSON and response status with JavaScript fetch?

To get the response JSON and response status with JavaScript fetch, we can get the status property from the response object.

For instance, we write:

(async () => {
  const r = await fetch("https://jsonplaceholder.typicode.com/posts/1")
  const body = await r.json()
  const {
    status
  } = r
  const obj = {
    status,
    body
  }
  console.log(obj)
})()

We make a GET request with fetch.

Then we call r.json to get the response body JSON.

Next, we get the status property from the r response object.

And then we combine them into one object and assign it to obj.

Therefore, obj is:

{
  "status": 200,
  "body": {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  }
}

Conclusion

To get the response JSON and response status with JavaScript fetch, we can get the status property from the response object.

Sometimes, we want to auto-highlight an input field on focus with JavaScript.

In this article, we’ll look at how to auto-highlight an input field on focus with JavaScript.

How to auto-highlight an input field on focus with JavaScript?

To auto-highlight an input field on focus with JavaScript, we can call select on the element when the focus event is emitted.

For instance, we write:

<input type="text" value="test" />

to add an input with a value filled in.

Then we write:

const input = document.querySelector('input')

input.addEventListener('focus', () => {
  input.select()
})

to select the input with document.querySelector.

And then we call input.addEventListener to add a focus event listener.

In the event handler, we call input.select to highlight the value in the input box.

As a result, we see the input box value highlighted when we click inside the input box.

Conclusion

To auto-highlight an input field on focus with JavaScript, we can call select on the element when the focus event is emitted.