How to get this.id on a for each function (Vanilla JS)

Question

Im making a function which one gets input checked on page loads, this have an unique id created by shopify, so i got a code in jquery which works fine, but im trying to get it to plain javascript (Vanilla) is anyone able to guide me :)

JQUERY version

(function() {
      $("#variantRadios input:checked").each(function() {
        console.log(this.id + " is checked")
      });
})();

Here is Vanilla JS code:

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach((checkVariant) => {
      console.log(this.id + " is checked")
    });
})();

score 2 · Answer 1 · answered Sep 25 '22 at 13:01

2

Use what is passed to the foreach:

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach((checkVariant) => {
      console.log(checkVariant.id + " is checked")
    });
})();

answered Sep 25 '22 at 13:01

Paul T.

4,703
11
25
29

Meligy · Accepted Answer · 2022-09-25T13:12:16.297

2

The () => way (called "arrow function") prevents the value of this from changing. So, it does not change to become each element. See forEach docs, arrow function docs, and function binding (changing this)

However, you don't need to mess with this anyway. The forEach passes three arguments (you can use zero, one, two, or all three of them), which are: the element, the index, and the entire list.

Again, see forEach docs.

Example:

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach(
      // can also be just `(checkVariant)` as needed
      (checkVariant, index, allCheckVariants) => {
        console.log(checkVariant.id + " is checked")
    });
})();

edited Sep 25 '22 at 13:12

answered Sep 25 '22 at 13:09

Meligy

35,654
11
85
109

1

up vote for explaining the context of "this" – Yogi Sep 25 '22 at 13:10
1

@Meligy thanks for that comment, is a perfect answer :) – ByGio1 Sep 25 '22 at 13:11

sasi66 · Answer 3 · 2022-09-25T13:15:20.870

0

Get element id by id property and get if its selected by checked property of an element in forEach method

(function () {
    const checkVariants = document.querySelectorAll('#variantRadios input:checked');
    checkVariants.forEach((checkVariant) => {
        console.log(`Id = ${checkVariant.id}, is checked = ${checkVariant.checked}`);
    });
})();

edited Sep 25 '22 at 13:15

answered Sep 25 '22 at 13:11

sasi66

437
2
7

The answer gets an attribute, a more accurate way to get the property is `:checked`, which is a valid CSS selector not a non-standard jquery thing. See https://developer.mozilla.org/en-US/docs/Web/CSS/:checked – Meligy Sep 25 '22 at 13:14

How to get this.id on a for each function (Vanilla JS)

3 Answers3